Question

我对HTML和AJAX / JQuery完全陌生。我想在同一页面上显示<div id = "test"> <form id="ajax-contact" method="post" action="/response/"> <div class="field"> <label for="name">your text here</label> <input type="text" id="name" name="name" required> </div> <div class="field"> <button>Submit</button> </div> </form> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script> <script> $(document).ready(function(){ $("button").click(function(){ $.post( { type:'POST', url:$(form).attr('action') data: $(form).serialize() }, function(response,status){ alert("Data: " + resp_final + "\nStatus: " + status); }); }); });中给出的输入结果。下面是代码片段。

resp_final

在上面的代码段中，response是从服务器检索的值，其中{{1}}是执行必要的计算/过程的服务器路由。这很好。但是，结果将显示在单独的页面上。我想在同一页面上显示结果。有人可以帮忙吗？

Answer 1

假设其他一切正常，唯一的问题就是<button>类型。由于没有显式类型，因此它可以用作“提交”按钮（因此，可以发布表单并重定向到响应）。

将按钮的类型更改为button，使其仅触发关联的事件处理程序。

<button type="button">Submit</button>

以下是按钮类型的可能值：

提交：该按钮将表单数据提交到服务器。如果未指定该属性，或者该属性动态更改为空值或无效值，则为默认设置。

重置：该按钮会将所有控件重置为其初始值。

按钮：该按钮没有默认行为。它可以具有与元素的事件相关联的客户端脚本，这些脚本在事件发生时触发。

来源：https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button

Answer 2

js：

$(document).ready(function(){
    $("form").on('submit', function(e){       
        e.preventDefault();//Will prevent "normal" submission
        $.post(
        {
         type:'POST',
         url:$(this).attr('action'),//"This" refers to the current form
         data: $(this).serialize()
        },
    function(response,status){
        alert("Data: " + resp_final + "\nStatus: " + status);
        //Do something here with the response...
        });
    });
});

Answer 3

将您的代码更改为此

$(document).ready(function(){
$("button").click(function(){
 $.ajax({
      type: "POST",
      url: $(form).attr('action'),
      data : $(form).serialize(),
      contentType:"application/json",
      success: function(data){
          alert("Data: " + data.resp_final + "\nStatus: " + data.status);
      },
      error: function(jqxhr) {
        alert(jqxhr.responseText); // errors: 324, 500, 404 
      }
  });
 });
});

HTML在同一页面上显示服务器的结果

3 个答案: