Jquery中的ajax与servlet、jsp如何在web项目中交换数据

最新推荐文章于 2024-04-23 22:35:01 发布

supertensor

最新推荐文章于 2024-04-23 22:35:01 发布

阅读量709

点赞数

分类专栏： ajax异步刷新 jquery ajax web数据交换文章标签： ajax jsp servlet jquery web

本文链接：https://blog.csdn.net/split123/article/details/79148800

版权

ajax异步刷新同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

jquery ajax web数据交换

1 篇文章 0 订阅

订阅专栏

本人将从个人练习jquery中的ajax例子讲起，ajax主要是利用异步，利用的多线程实现无刷新局部更新页面，基本原理在这里不讲解，从jquery官网上下载了jquery最新的3.2.1min版本，在myeclipse新建一个web project，webroot是项目的根目录，发布项目的时候输入网址，查找文件就是在这里面找的，所以在这个文件夹下新建一个js文件夹用来存放下载的js文件，把前面下载的jque包放到js下面后，这个jquery文件报错了。至于什么错，百度上可以看见的，采取网上的办法，在myeclipse里将这个错误排除掉，具体操作可见百度。

jquery封装了js代码，在练习当中，发现比js代码更简洁，个人刚开始觉得jquery里面的东西很多也很杂，慢慢来，目前我知道ajax有两种方法，一种是使用原生的js代码，使用xmlhttprequest对象操作，博主的接下来会写使用原生ajax与json相结合的web项目传数据demo。另一种是jquey封装的ajax。

注意问题：有一些问题是老生常谈，在这里先列举一些：script的引入路径问题，servlet向浏览器传数据问题，传数据的格式问题等。

1）路径有相对路径和绝对路径，同样也可以使用一个网址，其实这个网址是某个公司的js文件

2）servlet向浏览器传数据主要是利用PrintWriter或者response.getWriter()

3）数据格式可以是字符串可以是网页，也可以是json

下面上代码（一个简单的登录验证，代码有两部分组成：jsp和servlet，可以借鉴别人的代码，

学会举一反三实现自己的需求，永远不要只会粘贴和复制）

首先是jsp或者html网页代码：

<!DOCTYPE html>
<html>
  <head>
    <title>default.html</title>
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=GB18030">
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<script type="text/javascript" src="js/jquery-3.2.1.min.js "></script>
<script type="text/javascript">
$(document).ready(function(){
$("#txtName").focus();//输入焦点
/*$("#txtName").keydown(function(event){//回车键，移动光标到密码框
$("#txtPass").focus();
});*/
/* $("#txtPass").keydown(function(event){
if(event.which=="13"){//用回车键提交表单
$("#btnLogin").trigger("click");
}
}); */
$("#btnLogin").click(function(){
//获取用户名称
var strTxtName=$("#txtName").val();
var strTxtPass=$("#txtPass").val();
$.ajax({
//请求登录处理页
url:"servlet/CheckUser",
dataType: "text",
type:"POST",
//传送请求数据
data:{txtName:strTxtName, txtPass:strTxtPass},
success: function(strValue){//登录成功后返回的数据
/* if(strValue == "succ"){
//$(".clsShow").html("操作提示，登录成功！"+strValue);

}else{
$("#divError").show().html("用户名或密码错误！"+strValue);
//console.log("error");
} */
if(strValue=="ok"){
$("#divError").show().html("操作提示，登录成功！"+strValue+" "+strValue.length);
}else{
alert(strValue);
$("#divError").show().html("用户名或密码错误！"+strValue+" "+strValue.length);
}
}
}
);

});
});
</script>
  </head>
  <body>
     <form id="frmUserLogin" action="" method="post">
    <div class="divFrame">
        <div class="divTitle">
            <span>用户登录</span>
        </div>
        <div>
            <div class="clsShow">
                <div id="divError">
                </div>
                <div>
                    名称：<input id="txtName" type="text"/></div>
                <div>
                    密码：<input id="txtPass" type="password"/></div>
                <div>
                    <input id="btnLogin" type="button" value="登录" /> 
                    <input id="btnReset" type="reset" value="取消" />
                </div>
            </div>
        </div>
    </div>
    </form>
  </body>
</html>

servlet代码如下：

request.setCharacterEncoding("utf-8");
//response.setContentType("text/html;charset=utf-8");//不注释掉这句的话会传一个html页面而不是字符串，可以试试
String txtName = request.getParameter("txtName");
String txtPass = request.getParameter("txtPass");
System.out.println(txtName+": "+txtPass);
//PrintWriter out = response.getWriter();

if(txtName.equals("张三")&&txtPass.equals("123456")){
String str="ok";
//out.write(str);
//out.close();
response.getWriter().print(str);
//response.getWriter().close();
}

supertensor

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
Jquery中的ajax与servlet、jsp如何在web项目中交换数据

本人将从个人练习jquery中的ajax例子讲起，ajax主要是利用异步，利用的多线程实现无刷新局部更新页面，基本原理在这里不讲解，从jquery官网上下载了jquery最新的3.2.1min版本，在myeclipse新建一个web project，webroot是项目的根目录，发布项目的时候输入网址，查找文件就是在这里面找的，所以在这个文件夹下新建一个js文件夹用来存放下载的js文件，把前面下
复制链接

扫一扫