php排斥ajaxsubmit函数,jQuery中的ajaxSubmit详解

刚刚学习中,使用到了ajaxSubmit,犹豫以前没有接触㢧这个,所以刚开始是一脸懵逼状态,最后通过查找资料的方式,解决了这个问题这个很兴奋,做到了页面的无刷新上传图片,送给看我博客园的朋友一句话:“山高人为峰,努力定成功!”

下面我对ajaxSubmit做一下总结:

1.jQuery引入进去;

2.网上下载jQuery Form插件;这里对form插件做一下介绍,因为刚开始做前端的人不一定能懂,jQuery Form插件是一个优秀的Ajax表单插件,可以非常容易地、无侵入地升级HTML表单以支持Ajax。

jQuery Form有两个核心方法 -- ajaxForm() 和 ajaxSubmit(), 它们集合了从控制表单元素到决定如何管理提交进程的功能。

另外,插件还包括其他的一些方法:

formToArray()、formSerialize()、fieldSerialize()、fieldValue()、clearForm()、clearFields() 和 resetForm()等。

核心方法:ajaxForm() 和 ajaxSubmit()

3.首先说用法,ajaxForm和ajaxSubmit都可以接收0或1个参数,该参数可以是一个变量、一个对象或回调函数,这个对象主要有以下参数:var object= {

url:url,      //form提交数据的地址

type:type,    //form提交的方式(method:post/get)

target:target,  //服务器返回的响应数据显示的元素(Id)号

beforeSerialize:function(){} //序列化提交数据之前的回调函数

beforeSubmit:function(){},  //提交前执行的回调函数

success:function(){},     //提交成功后执行的回调函数

error:function(){}, //提交失败执行的函数

dataType:null,       //服务器返回数据类型

clearForm:true,       //提交成功后是否清空表单中的字段值

restForm:true,       //提交成功后是否重置表单中的字段值,即恢复到页面加载时的状态

timeout:6000         //设置请求时间,超过该时间后,自动退出请求,单位(毫秒)。

}

权限信息展示

//这里引入

$(function () {

//绑定异步上传图片

bindUpLoad();

});

//绑定异步上传图片

function bindUpLoad() {

alert("aaaaa");

$("#btnUpLoadFile").click(function () {

alert("bbbbb");

$("#AddDiglogp form").ajaxSubmit({

url: '/ActionInfo/UploadImg',

type: "Post",

success: function (data) {

alert("ccccc");

//将返回的数据加载到隐藏域

$("#IconImg").val(data);

$("#ShowImgp").html("%22%20+%20data%20+%20%22");

}

});

});

}

HTML代码是这样的:

@using (Ajax.BeginForm("AddActionInfo", "ActionInfo", new AjaxOptions() { OnSuccess = "afterAdd" }))

{

权 限 名:
Url:
Http方法类型:

GET

POST

是否是菜单:
菜单图片地址:
排 序:
备 注:

}

最终要完成的项目是这样的:

da0a7f0e93758c703d9562d525b04588.png

最终我成功的实现了异步无刷新上传图片的功能!

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值