时间戳

首页 > 解决方案 > HTML 在同一页面上显示来自服务器的结果

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

问题描述

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

<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是执行必要计算/处理的服务器路由。这很好用。但是，结果显示在单独的页面上。我想在同一页面上显示结果。有人可以帮忙吗？

标签： jqueryhtml

解决方案

将您的代码更改为此

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

推荐阅读