HTML 在同一页面上显示来自服务器的结果答案

【问题标题】：HTML Displaying the result from server on the same pageHTML 在同一页面上显示来自服务器的结果
【发布时间】：2018-11-24 16:27:24
【问题描述】：

我对 HTML 和 AJAX /JQuery 完全陌生。我想在同一页面上显示form 中给出的输入结果。下面是代码sn-p。

<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);
        });
    });
});

在上面的 sn-p 中，resp_final 是从服务器检索的值，其中 response 是执行必要计算/处理的服务器路由。这很好用。但是，结果显示在单独的页面上。我想在同一页面上显示结果。有人可以帮忙吗？

【问题讨论】：

由于您的按钮是默认类型 (submit)，它将发布您的表单，结果将作为新的 HTML 内容收集。您应该尝试将该按钮更改为<button type="button">Submit</button>。
html 按钮的“type”属性的可能值： submit：按钮将表单数据提交给服务器。如果未指定属性，或者属性动态更改为空值或无效值，则这是默认值。重置：该按钮将所有控件重置为其初始值。按钮：按钮没有默认行为。它可以具有与元素事件相关联的客户端脚本，这些事件在事件发生时被触发。（取自developer.mozilla.org/en-US/docs/Web/HTML/Element/button）

标签： jquery html

【解决方案1】：

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

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

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

这是按钮类型的可能值：

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

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

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

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

【讨论】：

【解决方案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...
        });
    });
});

【讨论】：

【解决方案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 
      }
  });
 });
});

【讨论】：