jQuery ajax 与服务器交互方法

1.HTML

<table>
<tr>
<td>用户名:</td>
<td><input type="text" name="username" id="name"></td>
</tr>
<tr>
<td>密&emsp;码:</td>
<td><input type="password" name="password" id="password"></td>
</tr>
<tr> <td rowspan="2"><button id="but">提交</button></td>
</tr>
</table>
<span id="show"></span> 2.JavaScript
$(function () {
$("#but").click(function () {
var name=$('#name').val();
var password=$('#password').val();
var url="LoginServlet"; //ajax post方法
/* $.post(url,{username:name,password:password},function () {
$('#show').text("success");
});*/
//ajax ajax方法
/* $.ajax({
type:"post",
url:url,
data:{username:name,password:password},
success:function () {
$('#show').text("登录成功");
},
error:function () {
$('#show').text("登录失败");
},
});*/
//ajax get方法
$.get(url,{username:name,password:password},function (data) {
$('#show').text(data);
}); }) ;
});

Java代码:

protected void doGet(javax.servlet.http.HttpServletRequest request, javax.servlet.http.HttpServletResponse response) throws javax.servlet.ServletException, IOException {
String name=request.getParameter("username");//获得用户名
String password=request.getParameter("password");//获得密码
String success="登录成功收到数据";
if(name.equals("admin")&password.equals("admin")){//判断
System.out.println("登录成功"); }else {
System.out.println("密码或用户名不正确");
}
} 运行结果图:
控制台运行结果:
jQuery ajax 与服务器交互方法
html页面结果
jQuery ajax 与服务器交互方法
上一篇:C#的历史及IDE总结


下一篇:backbonejs mvc框架