使用jquery处理xml数据（三）

最新推荐文章于 2024-05-02 18:32:43 发布

dabizime

最新推荐文章于 2024-05-02 18:32:43 发布

阅读量580

点赞数

分类专栏： Ajax 文章标签： jquery xml 服务器 xmlhttprequest ajax servlet

本文链接：https://blog.csdn.net/dabizime/article/details/5490055

版权

Ajax 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

首先写一个html userxmljquery.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>用户校验ajax实例</title>
     
     
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/validatexmljquery.js"></script>
</head>
<body>
    用户名校验AJAX实例，请输入用户名：</br>
    <input type="text" id="userName"><br>
    <input type="button" value="检查" οnclick="validatexmljquery()">
    
     
    <div id="result"></div>

</body>
</html>

再写一个servlet类 jqueryServletXML
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpServlet;
import javax.servlet.ServletException;
import java.io.IOException;
import java.io.PrintWriter;

public class jqueryServletXML extends HttpServlet{
     protected void doGet(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse) throws ServletException, IOException {
          try{
            //修改点1---响应Content-Type必须是text/xml
            httpServletResponse.setContentType("text/xml;charset=utf-8");
            PrintWriter out = httpServletResponse.getWriter();

//1.取参数
String username = httpServletRequest.getParameter("username");

            //修改点2---返回的数据需要拼装成xml格式
                StringBuilder builder = new StringBuilder();
                builder.append("<message>");

            //2.检查参数是否有问题
            if(username == null || username.length() == 0){
                builder.append("用户名不能为空").append("</message>");
            } else{

//3.校验操作

                if(username.equals("wangxingkui")){
                    //4.和传统应用不同之处。这一步需要将用户感兴趣的数据返回给页面段，而不是将一个新的页面发送给用户
                    //写法没有变化，本质发生了改变
                    builder.append("用户名[" + username + "]已经存在，请使用其他用户名, ").append("</message>");

} else{
builder.append("用户名[" + username + "]尚未存在，可以使用该用户名注册, ").append("</message>");

                }
                 //修改点3---这一句话要加上
                out.println(builder.toString());

            }
        } catch(Exception e){
            e.printStackTrace();
        }
    }

    protected void doPost(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse) throws ServletException, IOException {
        doGet(httpServletRequest, httpServletResponse);
    }
}

最后写一个js validatexmljquery.js
//定义用户名校验方法
function validatexmljquery(){
    //首先测试一下页面的按钮按下，可以调用这个方法
    //使用JavaScript的alert方法，显示一个弹出提示框
     // alert("按钮被点击了");

    //1.获取文本框中的内容
    //document.getElementById("username"); dom方式
    //jquery的查找节点的方式，参数中#加上id的属性值就可以找到一个节点
    //jquery的方法返回的都是jquery的对象，可以继续在面执行其他的jquery操作
    var jqueryObj = $("#userName");
    //获取节点的值
    var userName = jqueryObj.val();
    //alert(userName);

    //2.将文本框中的数据发送给服务器端的servlet
    //javascript当中，一个简单的对象的定义方法
//    var obj = {name:"123",age:24};
    //使用jquery的XMLHTTPRequest对象get请求的封装
    $.ajax( {
              type:"POST",//HTTP请求方式
              url:"jqueryServletXML",//服务器端的url地址
              data:"username=" + userName,//发功给服务器端的数据
              dataType:"xml",//告诉jquery返回的数据格式
              success:callback //定义交互完成，并且服务器正确返回时调用的回调函数
    } );

}

//回调函数
function callback(data){
//     alert("服务器端的数据回来了！！");
     //3.接收服务器端返回的数据
    //需要将data这个dom对象中的数据解析出来
    //首先需要将dom的对象转换成jquery的对象
    var jqueryObj = $(data);
    //获取message节点
    var message = jqueryObj.children();
    //获取文本内容
    var text = message.text();
     //.4将服务器端返回的数据动态的显示在页面上
     //找到保存结果信息的节点
     var resultObj = $("#result");
    //动态改变页面中div节点中的内容
    resultObj.html(text);
}

不要忘了配置web.xml

dabizime

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
使用jquery处理xml数据（三）

首先写一个html userxmljquery.html "http://www.w3.org/TR/html4/loose.dtd"> 用户校验ajax实例用户名校验AJAX实例，请输入用户名： 456--> 123456--> 再写一个servlet类 jquer
复制链接

扫一扫