AJAX完成后运行SQL查询
我目前有2个html下拉菜单。 一旦我从中选择，它就会过滤HTML表格中的数据，并根据选择显示数据。 我还可以对每一行进行更改，通过单击保存按钮，运行更新表的更新查询。 之后，运行该更新，我希望它重新运行用于根据下拉列表选择过滤结果的相同查询，以便您可以在单击“保存并运行”后查看所选内容的最新结果。更新声明。 现在，你可以看到我有window.location.href = window.location.href; 在我的AJAX函数中成功回调，但是重新加载整个页面并运行在页面加载时显示的默认查询，因此这对我不起作用。
在下拉选择之后过滤表结果的所有查询都在我的dropdown-display.php页面中，一旦我选择了某些内容，就会调用该页面。
HTML下拉菜单：
JavaScript（index.js）：
$(document).ready(function () { $('.save').click(function (event) { var $row = $(this).parents('tr'); var acct = $row.find('td[name="account"]').text(); var date = $row.find('td[name="date"]').text(); var checked = $row.find('input[name="selected"]').is(':checked'); var currency = $row.find('input[name="currency"]').val(); var datepicker = $row.find('input[name="datepicker"]').val(); var notes = $row.find('textarea[name="notes"]').val(); var paid = $row.find('input[name="paid"]').is(':checked'); var request = $.ajax({ type: "POST", url: "update.php", data: { acct: acct, date: date, checked: checked, currency: currency, datepicker: datepicker, notes: notes, paid: paid }, success: function(data){ alert('Row successfully saved'); //window.location.href = window.location.href; } }); }); });
这是我在我的主index.php页面中的head标签中运行的javascript：
function showUser(collector,date) { $('#billing_table').hide(); if (collector == "") { document.getElementById("txtHint").innerHTML = ""; return; } else { if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp = new XMLHttpRequest(); } else { // code for IE6, IE5 xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { document.getElementById("txtHint").innerHTML = this.responseText; var newTableObject = document.getElementById('billing_table'); sorttable.makeSortable(newTableObject); } } $.ajax( "dropdown-display.php" ,{ data:{ q:collector, data:date||undefined } } ).then( function(responseText){ $("#txtHint").html(responseText); sorttable.makeSortable($('#billing_table')[0]); } ,function(error){ console.warn("something went wrong:",error); debugger; } ) } } $(document).ready(function(){ $("#collector, #date").change(function(e){ showUser( $("#collector").val() ,$("#date").val() ); }); $("#collector").change(function(e){ $.post('index-ajax.php',{filter:'Name',by:$(this).val()},function(data){ $("#date .choice").hide(); $.each(data, function(key,row) { $("#date option").filter(function(i){ return $(this).attr("value").indexOf( row.item ) != -1; }).show(); }); },"JSON"); }); });
您可以在成功响应ajax之后绑定事件：
$(document).ready(function () { $('.save').click(function (event) { var $row = $(this).parents('tr'); var acct = $row.find('td[name="account"]').text(); var date = $row.find('td[name="date"]').text(); var checked = $row.find('input[name="selected"]').is(':checked'); var currency = $row.find('input[name="currency"]').val(); var datepicker = $row.find('input[name="datepicker"]').val(); var notes = $row.find('textarea[name="notes"]').val(); var paid = $row.find('input[name="paid"]').is(':checked'); var request = $.ajax({ type: "POST", url: "update.php", data: { acct: acct, date: date, checked: checked, currency: currency, datepicker: datepicker, notes: notes, paid: paid }, success: function(data){ alert('Row successfully saved'); $('#chdir select').bind('change', getDirs); // this is use for example like change of select } }); }); }); function getDirs(){ //any functionality you want }
您需要将filter（在Ajax调用中）作为参数发送到获取结果的页面。 您可以将它们命名为collector_sel和date_sel。
更新完成后，您必须返回这些参数。
例如，您可以在用于window.location的相同GET字符串中返回它们。 HREF。
窗口。 地点。 href =“index.php？collector_sel = abc＆date_sel = bcd”
然后在您最初加载的页面上比较filter值以再次选择它们。