ajax()方法是jQuery底层的ajax实现，通过HTTP请求加载远程数据。
$.ajax({
type: "GET",
url: "handleAjaxRequest.action",
data: {paramKey:paramValue},
async: true,
dataType:"json",
success: function(returnedData) {
alert(returnedData);
//请求成功后的回调函数
//returnedData--由服务器返回，并根据 dataType 参数进行处理后的数据；
//根据返回的数据进行业务处理
},
error: function(e) {
alert(e);
//请求失败时调用此函数
}
});
}
参数说明:
type:请求方式，“POST”或者“GET”,默认为“GET”。
url:发送请求的地址。
data:要向服务器传递的数据，已key:value的形式书写（id:1）。GET请求会附加到url后面。
async:默认true,为异步请求，设置为false,则为同步请求。
dataType:预期服务器返回的数据类型,可以不指定。有xml、html、text等。
在开发中，使用以上参数已可以满足基本需求。
如果需要向服务器传递中文参数，可将参数写在url后面，用encodeURI编码就可以了
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
text-align: center;
padding: 0;
margin: 0;
}
table{
background: black;
margin: auto;
}
td{
width: 150px;
height: 50px;
background: white;
}
input{
border:0;
}
.one{
width: 150px;
height: 50px;
}
.two{
width: 300px;
height: 50px;
}
</style>
</head>
<body>
<h1>禾米科技免费培训申请表</h1>
<h5>方式一：在线填写（如果信息提交失败或者您使用的是IE10版本一下的浏览器请选择方式二</h5>
<form action="">
<table>
<tr><td colspan="6" style="text-align: left;">个人信息及联系方式</td></tr>
<tr>
<td>姓名</td>
<td><input type="text" class="one" id="name"/></td>
<td>性别</td>
<td><select name="" id="sex">
<option value="">男</option>
<option value="">女</option>
</select></td>
<td>出生年月</td>
<td><input type="month" id="birthday" /></td>
</tr>
<tr>
<td>手机号码</td>
<td><input type="text" id="mobile" class="one"/></td>
<td>政治面貌</td>
<td><select name="" id="political">
<option value="">团员</option>
<option value="">党员</option>
<option value="">群众</option>
</select></td>
<td>QQ</td>
<td><input type="text" class="one" id="qq"/></td>
</tr>
<tr>
<td>学院</td>
<td><input type="text" class="one" id="college"/></td>
<td>系</td>
<td><input type="text" class="one" id="faculty"/></td>
<td>专业</td>
<td><input type="text" class="one" id="major"/></td>
</tr>
<tr><td colspan="6" style="text-align: left;">家庭联系方式</td></tr>
<tr>
<td>父亲姓名</td>
<td colspan="2"><input type="text" class="two" id="fatherName"/></td>
<td>父亲电话</td>
<td colspan="2"><input type="text" class="two" id="fatherMobile"/></td>
</tr>
<tr>
<td>母亲姓名</td>
<td colspan="2"><input type="text" class="two" id="motherName"/></td>
<td>母亲电话</td>
<td colspan="2"><input type="text" class="two" id="motherMobile"/></td>
</tr>
<tr>
<td>家庭住址</td>
<td colspan="5">
<input type="text" style="width: 750px;height: 50px;" id="address"/>
</td>
</tr>
<tr>
<td>信息来源</td>
<td colspan="5"><input type="radio" name="1" id="" value="" />熟人介绍
<input type="radio" name="1" id="" value="" />杂志
<input type="radio" name="1" id="" value="" />媒体广告
<input type="radio" name="1" id="" value="" />其他
</td>
</tr>
<tr><td colspan="6" style="text-align: left;">
个人能力与自我评价（自己所学的专业知识与能力，获奖情况以及自己的优点与兴趣爱好）</td>
</tr>
<tr style="height: 100px;">
<td>专业能力描述</td>
<td colspan="5">
<textarea type="text" id="power" style="width: 750px;height: 100px;border:0">
</textarea>
</td>
</tr>
<tr style="height: 100px;">
<td>自我评价描述</td>
<td colspan="5">
<textarea type="text" id="selfMemo" style="width: 750px;height: 100px;border:0">
</textarea>
</td>
</tr>
</table>
<input type="button" name="" id="upload" value="提交" />
</form>
</body>
<script src="lib/jquery-3.1.1.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#upload").click(function(){
var name = $("#name").val();
var sex = $("#sex").find("option:selected").text();
var birthday = $("#birthday").val();
var birth = birthday.split("-");
birthday = birth[0]+birth[1];
var mobile = $("#mobile").val();
var political = $("#political").find("option:selected").text();
var college = $("#college").val();
var qq = $("#qq").val();
var faculty = $("#faculty").val();
var major = $("#major").val();
var fatherName = $("#fatherName").val();
var fatherMobile = $("#fatherMobile").val();
var matherName = $("#motherName").val();
var matherMobile = $("#motherMobile").val();
var homeAddress = $("#address").val();
var source;
var majorMemo = $("#power").val();
var selfMemo = $("#selfMemo").val();
if($("#name").val().length < 2 || $("#name").val().length > 11){
alert("姓名格式不对");
return false;
}
if($("#birthday").val() == ""){
alert("出生年月格式不对")
return false;
}
var num = /^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/;
if(!num.test($("#mobile").val())){
alert("手机号格式不对");
return false;
}
if($("#qq").val().length < 6 || $("#qq").val().length > 11){
alert("qq格式不对");
return false;
}
if($("#college").val().length < 2 || $("#college").val().length > 100){
alert("学院格式不对");
return false;
}
if($("#faculty").val().length < 2 || $("#faculty").val().length > 110){
alert("系格式不对");
return false;
}
if($("#major").val().length < 2 || $("#major").val().length > 110){
alert("专业格式不对");
return false;
}
if($("#fatherName").val().length < 2 || $("#fatherName").val().length > 11){
alert("父亲姓名格式不对");
return false;
}
if(!num.test($("#fatherMobile").val())){
alert("父亲手机号格式不对");
return false;
}
if($("#motherName").val().length < 2 || $("#motherName").val().length > 11){
alert("母亲姓名格式不对");
return false;
}
if(!num.test($("#motherMobile").val())){
alert("母亲手机号格式不对");
return false;
}
if($("#address").val().length<2 || $("#address").val().length>22){
alert("住址格式不对");
return false;
}
var m = 0;
for (var i = 0 ;i<$("input[name='1']").length;i++) {
if($("input[name='1']")[i].checked == true){
m++;
switch(i){
case 0:
source = "熟人介绍";
break;
case 1:
source = "杂志";
break;
case 2:
source = "媒体广告";
break;
case 3:
source = "其他";
break;
}
}
}
if(m == 0){
alert("信息来源未选择");
return false;
}
if($("#power").val().length<2 || $("#power").val().length>220){
alert("能力描述格式不对");
return false;
}
if($("#selfMemo").val().length<2 || $("#selfMemo").val().length>220){
alert("自我描述格式不对");
return false;
}
var _url = "http://www.hemijiaoyu.com/service/addApply";
var _data = {};
_data.name = name;
_data.sex = sex;
_data.birthday = birthday;
_data.mobile = mobile;
_data.political = political;
_data.college = college;
_data.qq = qq;
_data.faculty = faculty;
_data.major = major;
_data.fatherName = fatherName;
_data.fatherMobile = fatherMobile;
_data.matherName = matherName;
_data.matherMobile = matherMobile;
_data.homeAddress = homeAddress;
_data.source = source;
_data.majorMemo = majorMemo;
_data.selfMemo = selfMemo;
// _data.createTime = new Date().getTime();
$.ajax({
type:"post",
url:_url,
data:_data,
dataType:"text",
success:function(msg){
console.log("pass"+msg)
},error:function(error){
console.log("fail"+error)
}
});
})
})
</script>
</html>