|
|
|
示例 2 : 使用get方式提交ajax 示例 3 : 使用post方式提交ajax 示例 4 : 最简单的调用ajax的方式 示例 5 : 格式化form下的输入数据
参考 使用AJAX 通过无刷新验证账号是否存在 这个例子,服务端使用JSP进行验证，当用户输入abc的时候提示"已经存在"
完整的 $.ajax 参数 比较复杂，这里采用了常见的调用方式。 $.ajax({ url: page, data:{"name":value}, success: function(result){ $("#checkResult").html(result); } }); $.ajax采用参数集的方式 {param1,param2,param3} 不同的参数之间用,隔开 第一个参数 url:page 表示访问的是page页面 第二个参数 data:{name:value} 表示提交的参数 第三个参数 success: function(){} 表示服务器成功返回后对应的响应函数 <script src="https://how2j.cn/study/jquery.min.js"></script>
<div id="checkResult"></div>
输入账号 :<input id="name" type="text">
<script>
$(function(){
$("#name").keyup(function(){
var page = "/study/checkName.jsp";
var value = $(this).val();
$.ajax({
url: page,
data:{"name":value},
success: function(result){
$("#checkResult").html(result);
}
});
});
});
</script>
$.get 是 $.ajax的简化版，专门用于发送GET请求
$.get( page, {"name":value}, function(result){ $("#checkResult").html(result); } ); $.get 使用3个参数 第一个参数: page 访问的页面 第二个参数: {name:value} 提交的数据 第三个参数: function(){} 响应函数 只有第一个参数是必须的，其他参数都是可选 <script src="https://how2j.cn/study/jquery.min.js"></script>
<div id="checkResult"></div>
输入账号 :<input id="name" type="text">
<script>
$(function(){
$("#name").keyup(function(){
var page = "/study/checkName.jsp";
var value = $(this).val();
$.get(
page,
{"name":value},
function(result){
$("#checkResult").html(result);
}
);
});
});
</script>
$.post 是 $.ajax的简化版，专门用于发送POST请求
$.post( page, {"name":value}, function(result){ $("#checkResult").html(result); } ); $.post 使用3个参数 第一个参数: page 访问的页面 第二个参数: {name:value} 提交的数据 第三个参数: function(){} 响应函数 只有第一个参数是必须的，其他参数都是可选 参考 method="get" 与 method="post"的区别 <script src="https://how2j.cn/study/jquery.min.js"></script>
<div id="checkResult"></div>
输入账号 :<input id="name" type="text">
<script>
$(function(){
$("#name").keyup(function(){
var page = "/study/checkName.jsp";
var value = $(this).val();
$.post(
page,
{"name":value},
function(result){
$("#checkResult").html(result);
}
);
});
});
</script>
<script src="https://how2j.cn/study/jquery.min.js"></script>
<div id="checkResult"></div>
输入账号 :<input id="name" type="text">
<script>
$(function(){
$("#name").keyup(function(){
var value = $(this).val();
var page = "/study/checkName.jsp?name="+value;
$("#checkResult").load(page);
});
});
</script>
<script src="https://how2j.cn/study/jquery.min.js"></script>
<div id="checkResult"></div>
输入账号 :<input id="name" type="text">
<script>
$(function(){
$("#name").keyup(function(){
var value = $(this).val();
var page = "/study/checkName.jsp?name="+value;
$("#checkResult").load(page);
});
});
</script>
serialize()： 格式化form下的输入数据
有的时候form下的输入内容比较多，一个一个的取比较麻烦，就可以使用serialize() 把输入数据格式化成字符串 <script src="https://how2j.cn/study/jquery.min.js"></script>
<div id="checkResult"></div>
<div id="data"></div>
<a href="https://how2j.cn/study/checkName.jsp">https://how2j.cn/study/checkName.jsp</a>
<form id="form">
输入账号 :<input id="name" type="text" name="name"> <br>
输入年龄 :<input id="age" type="text" name="age"> <br>
输入手机号码 :<input id="mobile" type="text" name="mobile"> <br>
</form>
<script>
$(function(){
$("input").keyup(function(){
var data = $("#form").serialize();
var url = "https://how2j.cn/study/checkName.jsp";
var link = url+"?"+ data;
$("a").html(link);
$("a").attr("href",link);
});
});
</script>
HOW2J公众号，关注后实时获知最新的教程和优惠活动，谢谢。
问答区域
2020-01-17
最后一个示例为什么没有load都可以成功？
2019-12-10
关于serialize方法的JQuery版本支持问题
回答已经提交成功，正在审核。 请于 我的回答 处查看回答记录，谢谢
2019-02-22
chrome上第一例用jquery提交ajax不显示
2018-12-31
账号是中文的情况怎么办,
2018-12-02
为什么最后一个实例中，它会自动区分用的是哪一个input标签啊
提问太多，页面渲染太慢，为了加快渲染速度，本页最多只显示几条提问。还有 5 条以前的提问，请 点击查看
提问之前请登陆
提问已经提交成功，正在审核。 请于 我的提问 处查看提问记录，谢谢
|
