jquery - 使用ajax仅在提交表单时重新加载div

Question

我有一个简单的FORM、一个INPUT 和一个SUBMIT 按钮。来自那里的数据将被发送到 PHP 脚本，该脚本将其发送到数据库，然后将其放入 DIV 中。 (聪明)
没有 Ajax，它工作得很好，数据进入数据库，它会被显示等等。但是使用 Ajax，它会更快并且更轻量级。

通常，提交会重新加载页面或重定向到我定义的页面。

但是有没有办法在完成提交后重新加载 DIV？

html:

<div> <!-- THE DATA FROM THE FORM VIA PHP --> </div>

<form id='foo'>
<input type='text'>
<input type='submit'>
</form>

到目前为止的 JQuery:

$('#foo').submit(function(event){
  $.ajax({
    url: 'index.html',
    type: 'post,
    data: $('#foo').serialize(),
    success: function(response, textStatus, jqXHR){
      console.log('worked fine');
    },
    error: function(jqXHR, textStatus, errorThrown){
      console.log('error(s):'+textStatus, errorThrown);
    }
  });
});

Answer 1

给你的 div 一个 id... 添加 onsubmit="return false"这样表单就不会重新加载或者提交时什么都没有

HTML

<div id="divID"> <!-- THE DATA FROM THE FORM VIA PHP --> </div>
<form id='foo' onsubmit="return false">
 <input type='text' name="yourname">
 <input type='submit'>
</form>

在您提供了 id 的 html 中显示响应。

JQUERY

$('#foo').submit(function(event){
  $.ajax({
    url: 'index.php',
    type: 'post',
    dataType:'html',   //expect return data as html from server
   data: $('#foo').serialize(),
   success: function(response, textStatus, jqXHR){
      $('#divID').html(response);   //select the id and put the response in the html
    },
   error: function(jqXHR, textStatus, errorThrown){
      console.log('error(s):'+textStatus, errorThrown);
   }
 });
 });

在这里写你的 html...我只是在这里打印 post 变量...你可以使用 <table> (html) 根据需要

索引.php

echo $_POST['yourname'].