从ajax响应返回调用javascript函数后页面保持刷新

Question

我已经尝试过大多数关于从ajax响应返回的调用javascript函数的答案。每个答案都有效，但我必须调用alert来显示ajax响应以查看结果。（如果不在函数refreshResults中使用alert，有时候结果会显示但会立即消失）似乎页面保持刷新。

这是截图。

我已经测试过浏览器可以从服务器成功接收数据。问题是如何从浏览器端显示数据。

以下是与从服务器接收数据以及服务器如何返回数据相关的代码。

AJAX

 function sendAjaxQuery(url, data) {

    $.ajax({
        type: 'POST',
        url: url,
        data: data,
        success: function (data) {
      //eval(document.getElementById("refreshResults").innerHTML);
      refreshResults(data);
      //$("#firstname").text(data);
      // alert('success '+data);
        }
    });
}

这是我向服务器发送数据的方式。

sendAjaxQuery('http://localhost:3000/results.html',JSON.stringify($('form').serializeObject()));

JS

<script type="text/javascript">
  function refreshResults(data){
    $("#firstname").text(data);
    alert(data);
  }
</script>

服务器端是nodejs。 （服务器端返回一个字符串。状态为200）。 http标头是

"Content-Type": "text/plain",'Access-Control-Allow-Origin': '*'

这是点击处理程序。

    function sendData() {
    var form = document.getElementById('myform');
    sendAjaxQuery('http://localhost:3000/results.html',JSON.stringify($('form').serializeObject()));
}
var sendButton = document.getElementById('sendButton');
sendButton.onclick = sendData;

这是相应的html

<form id="myform">

<input type="text" name="Search" value="">


<button id="sendButton" >Search</button>

Answer 1

sendAjaxQuery方法的重点是什么？

它只是重新创建$.post所做的事情

只需使用

// url and data should be whatever you pass to sendAjaxQuery now
$.post(url, data, refreshResults); 

无论何时你想进行ajax调用..

---

更新看到您正在提交表单的内容，问题可能是您允许以正常方式提交表单（会导致刷新页面）。

您需要取消启动此操作的按钮的正常操作..

由于您使用的是jQuery，因此最好使用它来绑定事件处理程序

更改

var sendButton = document.getElementById('sendButton');
sendButton.onclick = sendData;

到

$('#sendButton').on('click', function(e){
    e.preventDefault();
    sendData();
});