我有一个php函数，我使用ajax调用它，然后使用ajax处理响应。但是，我想防止页面重新加载。
我有包含对function1()调用的index.php，它包括ajaxcall.js和jquery
然后我的functions.php:
function function1(){
echo '
<form id="myform" action="" method="post" enctype="multipart/form-data">
<input type="text" name="callyoukai_search" id="myInput" onkeydown="searchfiltersajax(this)" placeholder="type an anime name" title="Type in a name">
</form>
<div id="table_recentanime" class="hscroll">
<table dir="ltr" id="myTable">';
// echo some table rows
}
if (isset($_POST['callyoukai_search'])) {
//echo "!!!" . $_POST['callyoukai_search'] . "the post value in php!!!!!!";
//echo
youkai_search($_POST['callyoukai_search']);
}
function youkai_search ($search_word){
// use $search_word to do a database query
return $result;
}
我的ajaxcall.js
function searchfiltersajax(search_word){
if(event.key === 'Enter') {
console.log("yes");
console.log(search_word.value);
document.getElementById("myform").addEventListener("Keypress", function(event){
event.preventDefault()
});
jQuery.ajax({
url: '../wp-content/plugins/youkai_plugin/youkai_plugin.php',
type: 'post',
data: { "callyoukai_search": "1"},
success: function(response) { var container = document.getElementById("myTable");
container.innerHTML = response;
console.log('php gave javascript '); console.log(response); console.log('php gave javascript '); }
});
console.log ("done");
}
}
我的ajax调用运行良好。它用所需的search_word调用php函数，搜索结果会像我想要的那样替换div内容。但是，紧接着，页面会重新加载。
如何防止重新加载？我试过preventDefault()，但我使用它的方式不起作用。
提前感谢
至：
<input type="text" name="callyoukai_search" id="myInput" onkeydown="searchfiltersajax(this, event)"
此外，不要在另一个事件处理程序中添加相同的事件处理程序(即：Keypress)：通过这种方式，您会越来越多地添加同一事件处理程序。相反，请使用事件参数。
我建议使用addEventListener()或.on()：
$('#myInput').on('keydown', function(e) {
searchfiltersajax(this, e);
});
片段：
function searchfiltersajax(search_word, e) {
if (event.key === 'Enter') {
e.preventDefault();
console.log("yes");
console.log(search_word.value);
jQuery.ajax({
url: '../wp-content/plugins/youkai_plugin/youkai_plugin.php',
type: 'post',
data: {"callyoukai_search": "1"},
success: function (response) {
var container = document.getElementById("myTable");
container.innerHTML = response;
console.log('php gave javascript ');
console.log(response);
console.log('php gave javascript ');
}
});
console.log("done");
}
}<form id="myform" action="google.com" method="post" enctype="multipart/form-data">
<input type="text" name="callyoukai_search" id="myInput" onkeydown="searchfiltersajax(this, event)"
placeholder="type an anime name" title="Type in a name">
</form>
<div id="table_recentanime" class="hscroll">
<table dir="ltr" id="myTable">
<tbody>
</tbody>
</table>
</div>searchfiltersajax接受一个名为search_word的参数。然后第一个if语句检查一个事件变量。这个变量在代码中没有声明，所以if语句中的代码永远不会被执行。
为了验证这一点，我建议添加debugger;作为searchfiltersajax函数中的第一条语句。然后在浏览器中打开调试控制台并重新加载页面。完成后，不要忘记删除debugger;语句。如果您知道如何在javascript调试器中设置断点，那么就不应该使用debugger;语句。
据我所知，您试图阻止表单提交到服务器，而是发送ajax调用。关于这个主题，StackOverflow上有几个答案，例如，通过点击Enter来阻止用户提交表单。你可以使用这样的代码来实现你的目标(取自链接)：
$(document).on("keypress", "form", function(event) {
return event.keyCode != 13;
});
最后但同样重要的是，我建议不要将任何服务器(甚至是您自己的服务器)发送到您的页面的原始HTML包括在内：
container.innerHTML = response;
相反，尝试发送一个包含您希望呈现的信息的JSON对象，并通过JavaScript将该对象转换为HTML元素。这样，您就有了一个更干净的数据交换接口，并且必须更改代码段来更改样式或其他表示方面。