使用 ajax 仅在提交表单时重新加载 div答案

【问题标题】：With ajax only reload div when submit Form使用 ajax 仅在提交表单时重新加载 div
【发布时间】：2012-10-08 16:31:56
【问题描述】：

我有一个简单的FORM、一个INPUT 和一个SUBMIT Button。来自那里的数据将被发送到 PHP 脚本，该脚本将其发送到 db，然后将其放入 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);
    }
  });
});

【问题讨论】：

您正在向 HTML 页面发送 AJAX 请求。不可能有 PHP 脚本！但是有一种方法可以只从返回的页面中获取一个 div，like：$("div").load("index.html #divYouWantToGet");

标签： jquery ajax forms html submit

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

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

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)

index.php

echo $_POST['yourname'].

【讨论】：

【解决方案2】：

成功：

function(response, textStatus, jqXHR){
      do stuff here
    },

如：$("#mydiv").html(response);

【讨论】：

【解决方案3】：

要停止页面重新加载，你会想阻止默认

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

【讨论】：

【解决方案4】：

我想您是在问如何动态修改网页内容。下面是一些示例代码：

<html>
<head>
<script src="./jquery-1.8.2.js">
</script>
<script>
function test()
{
    var test_div = $("#test_div");
    test_div.html("hihihi");
}
</script>
</head>
<body>
<input type="button" onclick="javascript:test();" value="test"/>
<div id="test_div">
test_div here
</div>
</body>
</html>

您将需要一个服务器端脚本将 div 内容返回为 json 或 xml，然后使用返回的 json/xml 动态修改 div 内容。

【讨论】：