目前我AJAX工作是這樣的：如何使用AJAX/JSON提交表單？

的index.php

<a href='one.php' class='ajax'>One</a>  
<div id="workspace">workspace</div>

one.php

$arr = array ("workspace" => "One"); 
echo json_encode($arr);

ajax.js

jQuery(document).ready(function(){ 
    jQuery('.ajax').live('click', function(event) { 
     event.preventDefault(); 
     jQuery.getJSON(this.href, function(snippets) { 
      for(var id in snippets) { 
       jQuery('#' + id).html(snippets[id]); 
      } 
     }); 
    }); 
});

上面的代碼工作正常。當我點擊鏈接「一」然後one.php執行和字符串「一」裝入工作區DIV。

問題：

現在我想提交一個帶有AJAX的表單。例如我有一個index.php這樣的表格。

<form id='myForm' action='one.php' method='post'> 
<input type='text' name='myText'> 
<input type='submit' name='myButton' value='Submit'> 
</form>

當我提交表單，然後one.php應打印在工作區DIV的文本框的值。

$arr = array ("workspace" => $_POST['myText']); 
echo json_encode($arr);

如何編寫js以AJAX/JSON格式提交表單。

感謝

來源

2010-08-09 NAVEED

提交表單很簡單：

$j('#myForm').submit();

然而，將回發整個頁面。

通過Ajax調用賽後也很簡單：

$j.ajax({ 
    type: 'POST', 
    url: 'one.php', 
    data: { 
     myText: $j('#myText').val(), 
     myButton: $j('#myButton').val() 
    }, 
    success: function(response, textStatus, XMLHttpRequest) { 
     $j('div.ajax').html(response); 
    } 
});

然後，如果您想要做的結果，你有兩個選擇的東西 - 你可以明確地設置success功能（我已經做了以上），也可以使用load helper方法：

$j('div.ajax').load('one.php', data);

不幸的是，你堅持一個凌亂位：填充該data對象與表單變量發佈。

但它應該是一個相當簡單的循環。

來源

2010-08-09 07:49:55 Keith

這裏我也回答了完整的解決方案。如果你會編輯你的答案，那麼SO會讓我投票給你。 – NAVEED 2010-08-18 18:18:54

看一看在jQuery Form Plugin的$.ajaxSubmit功能。應儘可能簡單

$('#myForm').ajaxSubmit();

你也可以綁定到表單提交事件，以便提交的所有文件通過AJAX去，因爲在鏈接頁面顯示的例子。

來源

2010-08-09 07:38:08 EMP

你可以用jQuery的$.ajax方法提交表單是這樣的：

$.ajax({ 
url: 'one.php', 
type: 'POST', 
data: $('#myForm').serialize(), 
success:function(data){ 
    alert(data); 
} 
});

來源

2010-08-09 07:42:49 Sarfraz

這裏是我的完整的解決方案：

jQuery('#myForm').live('submit',function(event) { 
    $.ajax({ 
     url: 'one.php', 
     type: 'POST', 
     dataType: 'json', 
     data: $('#myForm').serialize(), 
     success: function(data) { 
      for(var id in data) { 
       jQuery('#' + id).html(data[id]); 
      } 
     } 
    }); 
    return false; 
});

來源

2010-08-18 17:46:52 NAVEED

如何使用AJAX/JSON提交表單？

問題：

回答

相關問題