ajax提交url与ajax提交表单的详细比较

  1:ajax自已构造一个url,这种方式传参数要用Data,不能用于表单提交。

  例:

  

复制代码 代码如下:

  function createHtml(id){

  $("#reloading").show();

  //edit_bg是个div,提交时显示,这样可以使背景页面不能操作。

  $("#edit_bg").show();

  $.ajax({

  type: "POST",

  url: "pageAction!createHtml.action",

  data: "id="+id,

  success: function(data){

  $("#reloading").hide();

  $("#edit_bg").hide();

  if(data == "true"){

  alert("操作成功。");

  }else{

  alert("操作失败,请联系管理员!");

  }

  }   //操作成功后的操作

  }); 

  }

  2:ajax提交表单,这对于大数据传输非常有用,如用户注册,信息量非常大,用ajax提交表单,页面比较美观 但是,对于ajax提交表单,我们还得引入一个js,即:jquery.form.js"

  例:

  

复制代码 代码如下:

  function uploadFile(){

  $("#reloading").show();

  $("#edit_bg").show();

  //form1为表单名

  $("#form1").ajaxSubmit({

  type: "POST",

  success: function(data){

  $("#reloading").hide();

  $("#edit_bg").hide();

  if(data.indexOf("true")!=-1){

  alert("操作成功。");

  }else{

  alert(data);

  alert("操作失败,请联系管理员!");

  }

  }   //操作成功后的操作

  }); 

  }

  3: 2项中ajax提交表单虽然可以正确操作,但返回的data数据有问题,页面得不到处理结果。如下的代码对ajax提交表单进行了纠正

  

复制代码 代码如下:

  function submitForm(){

  $('#form1').ajaxSubmit(ajaxOptionsNew);

  }

  var ajaxOptionsNew = {

  beforeSubmit : fn_check_form,

  success : showResponse,

  url : "costAtion!save2.action",

  error : function(XMLResponse) {

  alert(XMLResponse.responseText);

  alert('操作失败!');

  // window.location.reload();

  }

  }; 

  function fn_check_form(){

  if($("#Name").val() == ""){

  alert("人不能为空");

  $("#Name").focus();

  return false;

  }

  }

  function showResponse(responseText) {

  try{

  //alert(responseText);

  if(responseText == 'true'){

  alert('操作成功!');

  window.location.reload();

  }

  else if(responseText == 'paramFalse')

  {

  alert("必填参数不能为空!")

  }

  else if(responseText == 'timeError')

  {

  alert("出发时间不能大于报销时间!");

  }

  else{

  alert('操作失败!');

  //   window.location.reload();

  }

  }catch(e){alert(e.message);}

  }