2


私は単純なFORM、1 つのINPUTと 1 つのSUBMIT Buttonを持っています。そこからのデータは PHP スクリプトに送信され、PHPスクリプトはこれを db に送信してからDIV内に配置します。（smartyで）
Ajaxがなくても問題なく動作し、データはdbに送られ、表示されます。しかし、Ajax を使用すると、より高速で軽量になります。

通常、送信すると、ページがリロードされるか、定義したページにリダイレクトされます。

しかし、Submit を実行した後に 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);
    }
  });
});
4

4 に答える 4

4

ur 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>

uがIDを与えたhtmlに応答を表示します。

Jクエリ

$('#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を書いてください...私はここに投稿変数を印刷しているだけです...<table>必要に応じて（html）を使用できます

index.php

echo $_POST['yourname'].
于 2012-10-18T09:16:53.393 に答える
1

成功：

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

そのような：$("#mydiv").html(response);

于 2012-10-18T09:08:17.007 に答える
0

ページのリロードを停止するには、デフォルトを防止したい

$('#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);
}
  });
});
于 2012-10-18T09:15:57.750 に答える
0

Web コンテンツを動的に変更する方法を尋ねていると思います。サンプルコードは次のとおりです。

<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 コンテンツを動的に変更します。

于 2012-10-18T09:41:21.417 に答える