jquery下异步提交表单 异步跨域提交表单

  1.使用post提交方式

  2.构造表单的数格式

  3.结合form表单的submit调用ajax的回调函数。

  使用 jQuery 异步提交表单代码:

  

复制代码 代码如下:

  <html xmlns="http://www.w3.org/1999/xhtml">

  <head>

  <title>无标题页</title>

  </head>

  <script src="js/jquery-1.4.2.js"></script>

  <script>

  jQuery(function($) {

  // 使用 jQuery 异步提交表单

  $('#f1').submit(function() {

  $.ajax({

  url: 'ta.aspx',

  data: $('#f1').serialize(),

  type: "post",

  cache : false,

  success: function(data)

  {alert(data);}

  });

  return false;

  });

  });

  </script>

  <body>

  <form id="f1" name="f1">

  <input name="a1" />

  <input name="a2" />

  <input id="File1" type="file" name="File1"/>

  <input id="Submit1" type="submit" value="submit" />

  </form>

  </body>

  </html>

  如何异步跨域提交表单呢?

  1.利用script 的跨域访问特性,结合form表单的数据格式化,所以只能采用get方式提交,为了安全,浏览器是不支持post跨域提交的。

  2.采用JSONP跨域提交表单是比较好的解决方案。

  3.也可以动态程序做一代理。用代理中转跨域请求。

  使用 jQuery 异步跨域提交表单代码:

  

复制代码 代码如下:

  <html xmlns="http://www.w3.org/1999/xhtml">

  <head>

  <title>无标题页</title>

  </head>

  <script src="js/jquery-1.4.2.js"></script>

  <script>

  jQuery(function($)

  {

  // 使用 jQuery 异步跨域提交表单

  $('#f1').submit(function()

  {

  $.getJSON("ta.aspx?"+$('#f1').serialize()+"&jsoncallback=?",

  function(data)

  {

  alert(data);

  });

  return false;

  });

  });

  </script>

  <body>

  <form id="f1" name="f1">

  <input name="a1" />

  <input name="a2" />

  <input id="File1" type="file" name="File1"/>

  <input id="Submit1" type="submit" value="submit" />

  </form>

  </body>

  </html>