Ajax jsp指定提交

来源：互联网发布：局域网控制软件破解版编辑：程序博客网时间：2024/05/29 06:37

文件结构：

ajax url 获取提交

index.jsp

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"    pageEncoding="ISO-8859-1"%><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"><title>Insert title here</title><script type="text/javascript" src="jquery.js"></script><script type="text/javascript">$(function(){$("input[type='button']").bind("click",function(){/**Ajax的请求*/$.ajax({//请求的路径及所传的参数url:"user.jsp",data:{//发送给数据库的数据   username:$("#username").val(),   content:$("#content").val()   },//是否异步async:true,//请求的方法type:"get",//请求成功时调用success:function(msg){alert(msg);},//请求失败时调用error:function(msg){alert(msg);}});});});</script></head><body><body> <input type="text" id ="username" class="username" /><input type="text" id ="content" class="content" />     <input type="button" value="Ajax请求" />  </body>  </body></html>

user.jsp

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><%   String name = request.getParameter("username");String content = request.getParameter("content");   if("zxl".equals(name)){     out.print("用户名正确"+content);   }else{     out.println("用户名错误");   }%>

ajax 指定url提交：

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"    pageEncoding="ISO-8859-1"%><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"><title>Insert title here</title><script type="text/javascript" src="jquery.js"></script><script type="text/javascript">$(function(){$("input[type='button']").bind("click",function(){/**Ajax的请求*/$.ajax({//请求的路径及所传的参数url:"user.jsp?username=zxl",//是否异步async:true,//请求的方法type:"get",//请求成功时调用success:function(msg){alert(msg);},//请求失败时调用error:function(msg){alert(msg);}});});});</script></head><body><body> <input type="text" id ="username" class="username" /><input type="text" id ="content" class="content" />     <input type="button" value="Ajax请求" />  </body>  </body></html>

=================================================================================

一、简单的Ajax请求

Js代码

<strong><script>
$(function() {
$("input[type='button']").bind("click", function() {
/**Ajax的请求*/
$.ajax( {
//请求的路径
url : "json.html",
//是否异步
async : true,
//请求的方法
type : "get",
//请求成功时调用
success : function(msg) {
alert(msg);
},
//请求失败时调用
error : function(msg) {
alert(msg);
}
});
});
});
</script>
</strong>

<!—body部分-->

Java代码

<body>
<input type="button" value="Ajax请求" />
</body>

二、Ajax请求jsp（传参数）

1、get请求

Js代码

<strong><script type="text/javascript">
$(function(){
$("input[type='button']").bind("click",function(){
/**Ajax的请求*/
$.ajax({
//请求的路径及所传的参数
url:"user.jsp?name=kouxiaolin",
//是否异步
async:true,
//请求的方法
type:"get",
//请求成功时调用
success:function(msg){
alert(msg);
},
//请求失败时调用
error:function(msg){
alert(msg);
}
});
});
});
</script>
</strong>

<!—user.jsp-->

Java代码

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String name = request.getParameter("name");
if("kouxiaolin".equals(name)){
out.print("用户名正确");
}else{
out.println("用户名错误");
}
%>

2、post请求

Js代码

<strong><script>
$(function() {
//参数也可以在前面定义好，然后再后面调用
// var obj={name:"kouxiaolin",pass:"123"}; $("input[type='button']").bind("click", function() {
/**Ajax的请求*/
$.ajax( {
//请求的路径
url : "user.jsp",
//是否异步
async : true,
//请求方式
type : "post",
//所传参数多个参数用&连接：data:"name=kouxiaolin&pass=123"
data:"name=kouxiaolin",
//data：obj,
//请求成功时调用
success : function(msg) {
alert(msg);
},
//请求失败时调用
error : function(msg) {
alert(msg);
}
});
});
});
</script>
</strong>

三、Ajax请求解析json

Js代码

<strong><script>
$(function() {
$("input[type='button']").bind("click", function() {
/**Ajax的请求*/
$.ajax( {
//请求路径
url : "user.html",
//是否异步
async : true,
//请求的方法
type : "get",
//请求成功是调用
success : function(msg) {
alert(msg.name);//返回kouxiaolin
},
//请求失败时调用
error : function(msg) {
alert(msg);
},
//请求解析返回的类型是json类型
dataType:"json"
});
});
});
</script>
</strong>