jQuery提交/ preventDefault / post

目标

• 我正在尝试使用AJAX将数据（从“页面A”上的表单）发布到另一个页面（“页面B”）
• 我希望将“页面B”中的某些内容加载到指定div （#result）中的“Page A” 中 。

我试过的

• 我在很大程度上基于jQuery .post()文档创建了相关的HTML和JS，并受到jQuery AJAX提交表单的一些影响。
• 我已经使用alert（）修改了进程失败的位置。
• 我在http://jsfiddle.net/jhfrench/QjaTq/创建了一个jsFiddle （ 后面的HTML和JavaScript是相同的）

症状

• 页面A直接提交给页面B，好像表单正常提交并且没有jQuery可以进行调解。

理论

• .submit()方法没有附加
• 或者它正在附加但是其中的preventDefault指令并没有拦截传统的表单提交

HTML

 
 
 Group 
   Politician Celebrity  
 
 
 Expiration Date 
  
 
 
 
  Feel like checking this box? 
 
 
  <input type="hidden" name="data" value="
Text echoed back to request
">   
 
 
We want to load the results within this div 

JavaScript的

 var trimTextFields = function () { alert('trim fields'); }, checkForm = function (incoming_form) { alert('custom validation'); }; /* attach a submit handler to the form */ $('#form_edit_sensitivity').submit(function (event) { /* stop form from submitting normally */ event.preventDefault(); confirm('we got this far'); /* get some values from elements on the page: */ var $form = $(this), data = $form.serialize(), url = $form.attr('action'); /* Send the data using post */ var posting = $.post(url, data); /* Put the results in a div */ posting.done(function (data) { var content = $(data).find('#summary'); $('#result').empty().append(content); }); }); 

为了解释“疯狂女生联谊会女孩”的不朽言辞 ，我准备将C-Punt放在这台电脑上。

再次， jsFiddle在http://jsfiddle.net/jhfrench/QjaTq/

Answer 1

 var trimTextFields = function () { alert('trim fields'); }, checkForm = function (incoming_form) { alert('custom validation'); return true; // <-- NECESSARY BECAUSE YOU'RE RETURNING THIS IN "submit" EVENT }; $(document).ready(function() // DOM is ready... { /* attach a submit handler to the form */ $('#form_edit_sensitivity').submit(function (event) { /* stop form from submitting normally */ event.preventDefault(); confirm('we got this far'); /* get some values from elements on the page: */ var $form = $(this), data = $form.serialize(), url = $form.attr('action'); /* Send the data using post */ var posting = $.post(url, data, function(response) { /* Put the results in a div */ var content = $(response).find('#summary'); $('#result').empty().append(content); }); }); }); 

我不知道如何使用trimTextFields和checkForm（可能是全局），但如果可以，请在$（document）.ready（）中声明它们。 始终尽量避免全局变量。

Answer 2

你需要将你的js包装在准备好的处理程序中 –

 $(function(){ // write your js here }); 

演示---> http://jsfiddle.net/QjaTq/2/