ajax表单提交
HTML代码:
<form id="formCity" action="/SiteMap/Search" method="get" onsubmit="return false">
<div class="form-group">
<div style="padding: 0; line-height: 30px; float: left; font-size: 16px; ">
快速查找:
</div>
<div class="col-md-3">
<input id="city_search" name="search" class="form-control" data-provide="typeahead" type="text" value="" required />
</div>
</div>
<input class="btn btn_main_sm" value="搜索" type="submit" onclick="findCity('formCity')">
</form>
Js代码:
<script type="text/javascript" src="/Resource/Scripts/jquery.validate.js"></script>
<script type="text/javascript" src="/Resource/Scripts/jquery.validate.Extend.js"></script>
<script type="text/javascript">
function findCity(formId) {
var form = $("#" + formId);
var valid = form.valid();
var method = form.attr("method");
var action = form.attr("action");
var btnSubmit = form.find("[type=submit]");
var btnText = btnSubmit.val();
if (valid) {
$.ajax({
type: method,
url: action,
beforeSend: function () {
btnSubmit.addClass('disabled').text("正在查询...");
},
data: form.serialize(),
success: function (data) {
if (data.IsSuccess) {
location.href = data.Message;
}
else {
alert(data.Message);
}
btnSubmit.removeClass("disabled").text(btnText);
}
, error: function (XMLHttpRequest, textStatus, errorThrown) {
alert("NetworkError:" + XMLHttpRequest.status + " " + XMLHttpRequest.statusText)
btnSubmit.removeClass("disabled").text(btnText);
}
})
} }
ajax表单提交的更多相关文章
- Ajax表单提交插件jquery form
jQuery Form插件是一个优秀的Ajax表单插件,我们可以非常容易的使用它处理表单控件的值,清空和复位表单控件,附件上传,以及完成Ajax表单提交. jQuery Form有两个核心方法ajax ...
- 使用Jquery.form.js ajax表单提交插件弹出下载提示框
现象: 使用jquery的from做ajax表单提交的时候,后台处理完毕返回json字符串,此时浏览器提示下载一个json文件而不是在success里面继续解析该json对象. 具体的原因: 浏览器兼 ...
- form表单提交和ajax表单提交,关于移动端如何通过软键盘上的【搜索】和【前进】进行提交操作
[文章来源]由于自己对于form研究甚少,所以一直用的都是AJAX进行提交,这次后台提出要用form提交,顺便深入研究一下:之前在做表单的时候,发现input可以通过设置不同的type属性,调用不同的 ...
- 20151223jquery学习笔记--Ajax表单提交
传统的表单提交, 需要多次跳转页面, 极大的消耗资源也缺乏良好的用户体验. 而这款form.js 表单的 Ajax 提交插件将解决这个问题.一. 核心方法官方网站: http://malsup.com ...
- Ajax表单提交及后台处理简单应用
首先先说下表单提交吧,要提交表单那么就得先收集表单数据(至于验证这个我就不说了,要说留下下次吧),有了jquery取个html的值还是简单$("xxid").val()等就完了,但 ...
- jquery.form.js(ajax表单提交)
Form插件地址: 官方网站:http://malsup.com/jQuery/form/ 翻译地址:http://www.aqee.net/docs/jquery.form.plugin/jquer ...
- 使用bean接收ajax表单提交数据包含文件上传
这几天写带图片上传的表单提交,一个配置小程序活动弹出框样式的功能,记录一下一些需要注意的地方 首先是 前端 JSP 文件的表单 <form class="search-wrapper& ...
- form表单和ajax表单提交(Html.BeginForm()、Ajax.BeginForm())的差别
有如下几种区别: 1. Ajax在提交.请求.接收时,都是异步进行的,网页不需要刷新: Form提交则是新建一个页面,哪怕是提交给自己本身的页面,也是需要刷新的: 2. A在提交时,是在后台新建一个请 ...
- jQuery ajax表单提交实现局部刷新
jQuery Ajax 异步提交 Form 表单,如果使用 get 请求,注意中文乱码问题,jquery 会先使用 iso8859-1 解码,然后发给服务器,如果使用 post 请求,则直接将中文内容 ...
- ajax表单提交全路径
//ajax提交form表单的方式 $(document).ready(function() { $('#shopping-submit').click(function() { alert(&quo ...
随机推荐
- Fxx and game
可提交的传送门http://acm.hdu.edu.cn/showproblem.php?pid=5945 分析:这道题目可以采用动态规划来解决 设f[i]表示把i变成1的最小代价. 所以有:f[i] ...
- Servlet实现asp.net中的Global.asax启动事件(Servlet和Listener使用)
1.Java Web中没有像asp.net的全局启动事件,但是可以通过web.xml中的load-on-startup节点来控制Servlet的开机启动和启动次数.web.xml详细配置参考:http ...
- 移动端设置-----rem
对于现在不同尺寸的移动端屏幕,如果设置px来说实在有点影响用户体验,在小屏幕上太大,大屏幕上太小,不能实现响应式,所以就引进了rem的概念. rem是相对于根元素<html> 在我的项目中 ...
- Beta阶段第五次Scrum Meeting
情况简述 BETA阶段第二次Scrum Meeting 敏捷开发起始时间 2016/12/15 00:00 敏捷开发终止时间 2016/12/16 00:00 会议基本内容摘要 平稳推进 参与讨论人员 ...
- 【原创】自己动手写工具----签到器[Beta 1.0]
一.写在前面 最近公司没有什么项目,想通过项目练练手的机会也没有,只能自己学习了,因此空下来的时间也挺多的,就打开网页看看吧,哎,一打开就让签到(像什么百度知道啊.百度云盘啊之类的),我签到的目的是获 ...
- Maven:将Jar安装到本地仓库和Jar上传到私服
1.依赖如下: <dependency> <groupId>org.quartz-scheduler.internal</groupId> <artifact ...
- 初学Java 精简知识点总结
面对Java丰富的知识资料,很多初学者难免觉得迷惘,该学什么,怎么去学?下面给大家讲Java基础知识做了精简总结,来帮助你梳理学习思路,赶快看看吧! 方法/步骤1 对象的初始化(1) 非静态对象的初始 ...
- 安卓3D游戏-神奇宝贝防御战
我和同学用unity引擎做的,作为软件工程的大作业. 是一个花费金钱抓怪.控制怪物站位.击杀进攻的敌人获得金钱的类似塔防的安卓游戏. 下载地址:http://pan.baidu.com/s/1gdpH ...
- html 图像映射(一个图像多个连接)
以前就见过那种导航地图,点击地图的不同省份分别跳到不同的连接,现在用html实现一下,简单的. 图像映射是指一个图像可以建立多个连接,就是在图像上面定义多个区域,每个区域连接到不同的地址. 效果如图: ...
- 【Alpha版本】冲刺阶段——Day 1
我说的都队 031402304 陈燊 031402342 许玲玲 031402337 胡心颖 03140241 王婷婷 031402203 陈齐民 031402209 黄伟炜 031402233 郑扬 ...