javascript - 调用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 header 是

"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，因此最好使用它来绑定(bind)事件处理程序

改变

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

至

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