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”以便表单不重新加载或者那些nothig on submit

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）

的index.php

echo $_POST['yourname'].

Answer 2

成功：

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

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

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

Answer 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内容。

使用ajax只在提交表单时重新加载div

4 个答案: