ajax提交url与ajax提交表单的详细比较_AJAX相关教程-查字典教程网
ajax提交url与ajax提交表单的详细比较
ajax提交url与ajax提交表单的详细比较
发布时间:2016-12-29 来源:查字典编辑
摘要:1:ajax自已构造一个url,这种方式传参数要用Data,不能用于表单提交。例:复制代码代码如下:functioncreateHtml(i...

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);}

}

相关阅读
推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
  • 大家都在看
  • 小编推荐
  • 猜你喜欢
  • 最新AJAX相关学习
    热门AJAX相关学习
    编程开发子分类