js解析文本、xml格式、json数据与ajax和servlet交互及乱码解决

1,在ajax与后台的交互中经常会出现乱码,

解决办法: 在后台获取数据的时候要改变其编码

//获取jsp页面传递过来的userName

 

 代码如下 复制代码
String user= request.getParameter("userName"); 
//使用String来改变获取到的字符集编码 
String userid = new String(user.getBytes("iso8859-1"),"GBK"); 

 

2,XMLHttpRequest实现Ajax局部更新效果

Ajax用于数据的更新等操作

xmlHttpRequest的属性和方法

方法描述

abort()停止当前请求

getAllResponseHeaders()把HTTP请求的所有响应首部作为键/值对返回

getResponseHeader("header")返回指定首部的串值

open("method", "url")建立对服务器的调用。method参数可以是GET、POST或PUT。url参数可以是相对URL或绝对URL。这个方法还包括3个可选的参数

send(content)向服务器发送请求

setRequestHeader("header", "value")把指定首部设置为所提供的值。在设置任何首部之前必须先调用open()

属性描述

onreadystatechange每个状态改变时都会触发这个事件处理器，通常会调用一个JavaScript函数

readyState请求的状态。有5个可取值：0 = 未初始化，1 = 正在加载，2 = 已加载，3 = 交互中，4 = 完成

responseText服务器的响应，表示为一个串

responseXML服务器的响应，表示为XML。这个对象可以解析为一个DOM对象

status服务器的HTTP状态码(200对应OK，404对应Not Found(未找到)，等等)

statusTextHTTP状态码的相应文本(OK或Not Found(未找到)等等)

使用XMLHttpRequest实现Ajax效果思路;

1,创建XMLHttpRequest

2,创建回调函数callback

3,设置请求的路径

4,发送数据

5,回调函数中判断是否交互完成,是否找到页面,接受servlet返回的数据

代码实现:

Servlet代码:记得web.xml中配置

 

 代码如下 复制代码
package ajaxDemo; 
 
import java.io.IOException; 
import java.io.PrintWriter; 
 
import javax.servlet.ServletException; 
import javax.servlet.http.HttpServlet; 
import javax.servlet.http.HttpServletRequest; 
import javax.servlet.http.HttpServletResponse; 
 
/**
 * 
 * @author Administrator 通过局部刷新来实现数据的查找Ajax
 */ 
public class AjaxServlet extends HttpServlet { 
 
    @Override 
    protected void doPost(HttpServletRequest request, 
            HttpServletResponse response) throws ServletException, IOException { 
        doGet(request, response); 
    } 
 
    @Override 
    protected void doGet(HttpServletRequest request, 
            HttpServletResponse response) throws ServletException, IOException { 
        PrintWriter out = response.getWriter(); 
        response.setContentType("text/html"); 
        request.setCharacterEncoding("GBK"); 
        response.setCharacterEncoding("GBK"); 
        //获取url传递的参数 
        String userName = request.getParameter("userName"); 
        System.out.println(userName); 
        //假设连接上数据库,判断 并给予返回值 ,ok表示可以注册,ON表示不可以注册 
        if ("123".equals(userName)) { 
            out.write("<span style="line-height: 1.5;">ON</span><span style="font-size: 1em; line-height: 1.5;">");</span> 
        } else { 
            out.write("OK"); 
        } 
    } 
}

 

注意:(重点)

Jquery和Ajax实现局部更新;需要引Jquery的包

ajax提交数据不需要通过form表单提交,不需要submit,

需要自己获取表单框中的值,

Html代码

 

 代码如下 复制代码
用户名:
<input type="text" id="userName" onblur="fun_user()" />
<div id="divName"></div>
<br /> 密 码: 
<input type="password" id="userPwd" />
<div id="divPwd"></div>
<input type="button" value="提交" />

 

Jquery+ajax关键代码:
Jquery+ajax代码

 

 代码如下 复制代码

<script type="text/javascript" src="js/jquery-1.8.3.js"> 
</script> 
</head> 
<body> 
<script type="text/javascript"> 
    //javascript中需要引入Jquery包就不能将函数写在同一级下 
    var xmlHttp; 
    function fun_user() { 
        //使用Jquery获取id的值 
        var username = $("#userName").val(); 

        //创建XMLHttpRequest的对象,js创建对象和java类似,也是使用new 
        //XMLHttpRequest的open(),send(),abort(),readyState,responseText 
        xmlHttp = new XMLHttpRequest(); 
        //         if(xmlHttp){ 
        //          alert("创建") 
        //     }else{ 
        //      alert("出错了"); 
        // } 
         
        //2,创建回调函数callback 
        xmlHttp.onreadystatechange = callback; 
        //3,创建与Servlet的连接符,定义连接的方式,是否为异步,是否需要账号和密码验证 
        xmlHttp.open("GET", "AjaxServlet?userName=" + username, true); 
        //4,发送数据,数据已经通过连接方式传送,所以这里只需要发送null 
        xmlHttp.send(null); 

    } 
  //回调函数callback 
    function callback() { 
        //判断是否Ajax交互完成 
        alert(xmlHttp.readyState); 
        //readyState的书中状态 
        if (xmlHttp.readyState == 4) { 
            //200表示网页是否找到 
            if (xmlHttp.status == 200) { 
                //以文本的方式返回值 
                var xmltext = xmlHttp.responseText; 
                //获取提示位置 
                var divname = document.getElementById("divName"); 
                //设置提示信息 
                divname.innerHTML = xmltext; 
            } 
        } 

    } 
</script> 

运行结果:

账号存在

 

 

账号不存在

 

3,js解析xml格式的数据  例子: xml动态检查用户名是否存在

后台代码:

Java代码

 

 代码如下 复制代码
/**xml传递数据
 * 
 * @author Administrator 通过局部刷新来实现数据的查找Ajax
 */ 
public class AjaxServlet extends HttpServlet { 
 
    @Override 
    protected void doPost(HttpServletRequest request, 
            HttpServletResponse response) throws ServletException, IOException { 
        doGet(request, response); 
    } 
 
    @Override 
    protected void doGet(HttpServletRequest request, 
            HttpServletResponse response) throws ServletException, IOException { 
        //xml传递数据:response.setContentType("text/xml");必须是xml的 
     
        response.setCharacterEncoding("GBK"); 
        request.setCharacterEncoding("GBK"); 
        PrintWriter out = response.getWriter(); 
        response.setContentType("text/xml"); 
        //获取url传递的参数 
        //解决js与servlet之间数据的乱码问题 
        String userName = request.getParameter("userName"); 
        String str =new String(userName.getBytes("iso8859-1"),"GBK"); 
        System.out.println(str); 
         
        //修改点二:xml的返回格式必须是有开始和结束的 
        StringBuffer buffer = new StringBuffer(); 
        buffer.append("<msg>"); 
        //假设连接上数据库,判断 并给予返回值 ,ok表示可以注册,ON表示不可以注册 
        if ("123".equals(str)) { 
            buffer.append(str +"用户名已存在").append("</msg>"); 
        } else { 
            buffer.append(str +"可以注册!!!").append("</msg>"); 
        } 
        //输出StringBuffer字符串 
        out.print(buffer); 
    } 
 
}

 

jsp界面代码

Jsp代码

 

 代码如下 复制代码

<script type="text/javascript" src="js/jquery-1.8.3.js"> 
</script> 
</head> 
<body> 
<script type="text/javascript"> 
    //javascript中需要引入Jquery包就不能将函数写在同一级下 
    var xmlHttp; 
    function fun_user() { 
        //使用Jquery获取id的值 
        var username = $("#userName").val(); 
      
        //创建XMLHttpRequest的对象,js创建对象和java类似,也是使用new 
        //XMLHttpRequest的open(),send(),abort(),readyState,responseText 
        xmlHttp = new XMLHttpRequest(); 
        //         if(xmlHttp){ 
        //          alert("创建") 
        //     }else{ 
        //      alert("出错了"); 
        // } 
         
        //2,创建回调函数callback 
        xmlHttp.onreadystatechange = callback; 
        //3,创建与Servlet的连接符,定义连接的方式,是否为异步,是否需要账号和密码验证 
        var url="AjaxServlet?userName=" + username; 
        xmlHttp.open("GET", url, true); 
        //4,发送请求头信息 
    //  xmlHttp.setRequestHeader("Content-Type", "application/x-www-from-urlencoded"); 
        //5,发送数据,数据已经通过连接方式传送,所以这里只需要发送null 
        xmlHttp.send(null); 
    //  xmlHttp.send("userName=" + username); 

    } 
  //回调函数callback 
    function callback() { 
        //判断是否Ajax交互完成 
    //  alert(xmlHttp.readyState); 
        //readyState的书中状态 
        if (xmlHttp.readyState == 4) { 
            //200表示网页是否找到 
            if (xmlHttp.status == 200) { 
                var xmlobj=xmlHttp.responseXML; 
                //<msg> </msg> 
                //使用document来解析返回的xml数据获取节点,返回一组元素 
                var domxml =xmlobj.getElementsByTagName("msg"); 
            if(domxml.length>0){  
                //获取domxml的第一个节点 firstChild 
              var responsexml =domxml[0].firstChild; 
                //获取节点的值nodeValue 
              var nodexml=responsexml.nodeValue; 
              alert("长度为:"+nodexml); 
                //以文本的方式返回值 
            //  var xmltext = xmlHttp.responseText; 
            //  alert(xmltext); 
            }else{ 
                alert("解析出错:"+xmlHttp.responseText); 
             } 
            } 
        } 
    } 
   

</script> 
<form>
    用户名: <input type="text" id="userName" onblur="fun_user()" /> 
    <div id="divName"></div> 
    <br /> 密 码: <input type="password" id="userPwd" /> 
    <div id="divPwd"></div> 
    <input type="button" value="提交" /> 
</form>

 

 


 

3,js解析json数据; json格式动态检查用户名是否存在

后台关键代码;

Java代码

 

 代码如下 复制代码
//接受数据 
String user= request.getParameter("userName"); 
String userid = new String(user.getBytes("iso8859-1"),"GBK"); 
 
System.out.println(userid); 
      //创建java转json的数据对象 
      String jsonstr="{}"; 
      JSONObject jsonsql = JSONObject.fromObject(jsonstr); 
            //00001  
            // id: 1 2 3   
            // menu: 工资   奖金   会议室的申请   
            // href: salary.jsp  money.jsp  meetingRoom.jsp     
      //存储Jsonobject对象的队列 
      ArrayList<JSONObject> jsonlist= new ArrayList<JSONObject>();  
      try { 
      //连接数据库查询用户的权限 
      Connection conn=DBUilt.getConn(); 
      String consql =" select  parentnode, menuname,menuhref from role_menu where parentnode   in (select menuid from role_role where userid=?)"; 
PreparedStatement pstm=conn.prepareStatement(consql); 
pstm.setString(1, userid); 
ResultSet rs=pstm.executeQuery(); 
while( rs.next()){ 
    //创建java转json的对象 
    JSONObject pstmjson = JSONObject.fromObject(jsonstr); 
    pstmjson.put("id", rs.getString(1)); 
    pstmjson.put("menu", rs.getString(2)); 
    pstmjson.put("href", rs.getString(3));   
    jsonlist.add(pstmjson); //创建json队列存放数据库取出来的对象 
} 
rs.close(); 
  } catch (Exception e) { 
e.printStackTrace(); 
 } 
      //写到jsp页面 
     out.write(jsonlist.toString());

 

jsp前台代码;

Java代码

 

 代码如下 复制代码
<script type="text/javascript" src="js/jquery-1.8.3.js"> 
</script> 
</head> 
<body> 
    <script type="text/javascript"> 
        //javascript中需要引入Jquery包就不能将函数写在同一级下 
        var xmlHttp; 
        function fun_user() { 
            //使用Jquery获取id的值 
            var username = $("#userName").val(); 
          
            //创建XMLHttpRequest的对象,js创建对象和java类似,也是使用new 
            //XMLHttpRequest的open(),send(),abort(),readyState,responseText 
            xmlHttp = new XMLHttpRequest(); 
            //         if(xmlHttp){ 
            //          alert("创建") 
            //     }else{ 
            //      alert("出错了"); 
            // } 
             
            //2,创建回调函数callback 
            xmlHttp.onreadystatechange = callback; 
            //3,创建与Servlet的连接符,定义连接的方式,是否为异步,是否需要账号和密码验证 
            var url="AJAXJson?userName=" + username; 
            xmlHttp.open("POST", url, true); 
            //4,发送请求头信息 
        //  xmlHttp.setRequestHeader("Content-Type", "application/x-www-from-urlencoded"); 
            //5,发送数据,数据已经通过连接方式传送,所以这里只需要发送null 
            xmlHttp.send(null); 
        //  xmlHttp.send("userName=" + username); 
 
        } 
      //回调函数callback 
        function callback() { 
            //判断是否Ajax交互完成 
        //  alert(xmlHttp.readyState); 
            //readyState的书中状态 
            if (xmlHttp.readyState == 4) { 
                //200表示网页是否找到 
                if (xmlHttp.status == 200) { 
                    //纯文本的方式返回 
                    var xmltext=xmlHttp.responseText; 
                    alert(xmltext); 
                    //以文本的方式返回值 eval将json数据解析成 
                    //var xmltext = eval(xmlHttp.responseText); 
                    //alert(xmltext[0].menu+"连接"+ xmltext[0].href);  
                } 
            } 
        } 
  
    </script> 
    <form> 
        用户名: <input type="text" id="userName" onblur="fun_user()" /> 
        <div id="divName"></div> 
        <br /> 密 码: <input type="password" id="userPwd" /> 
        <div id="divPwd"></div> 
        <input type="button" value="提交" /> 
    </form> 

 

 

 

时间： 2024-10-27 19:19:45

js解析文本、xml格式、json数据与ajax和servlet交互及乱码解决的相关文章

不使用第三方包可以使用是么方法解析xml与json数据

问题描述 不使用第三方包可以使用是么方法解析xml与json数据 不使用第三方包可以使用是么方法解析xml与json数据! 不使用第三方包可以使用是么方法解析xml与json数据! 不使用第三方包可以使用是么方法解析xml与json数据! 解决方案 当初文件来查找解析.比较繁琐而已. 解决方案二: org.w3c.dom 就提供解析XML的接口.

AJAX Hacks之Hack 4. 接收XML格式的数据

ajax|xml|数据 AJAX Hacks之Hack 4. 接收XML格式的数据 当前的许多交换数据的技术都使用XML格式的数据,那是因为XML格式的数据被广泛的使用和支持.因此,不同用户可以已有的技术来生成.发送.接收XML数据而不需要使用别的工具转换数据的格式. 一个典型的例子就是一个GPS设备可以在任何地方共享它需要的数据.无论是在远行.或是户外活动,当把设备插入到计算机的UBS接口后,就可以向web发送数据了.GPS软件被设置为默认支持XML格式的数据.而web也使用xml格式的数据.

json 数据解析-android 这样的json 数据该怎么解析

问题描述 android 这样的json 数据该怎么解析 {requestStatus"": ""success""errorCode"": ""0""errorTip"": ""操作完成""activityMemberArray"": [ {editTribe"": [ {tribeId

date-jackson mapper解析带stimestame格式的数据

问题描述 jackson mapper解析带stimestame格式的数据 json中有A,B,C,D四个表的全部数据,格式为{"A":"[{},{},{}]"},"B":"[{},{},{}]","C":[{},{}] 有四个实体类,对应ABC,在实体类C中有一个字段时java.Util.Date 类型ctime, 那么问题来了,我接收到该jsonStr后经过 json = mapper.readValu

把数据库导出的sql文件解析为xml格式的

问题描述 就像主题说的,导出的sql文件,里面含有大量注释有--的还有/****/的不但要把注释里的重要信息解析出来,还要做很多东西.下面看我的图sql语句中间的注释也要清掉...求大神告诉我具体的思路,自己死磕太难受了 解决方案 解决方案二:这个事xml的图解决方案三:估计只有一行行的的通过注释啊等判断.比如注释开始结束.或者sql的update啊,delete开始啊,等.解决方案四:看不出你的sql脚本和你的xml有什么联系啊解决方案五:引用1楼u013146997的回复: 这个事xml的图

python自定义解析简单xml格式文件的方法

  这篇文章主要介绍了python自定义解析简单xml格式文件的方法,涉及Python解析XML文件的相关技巧,非常具有实用价值,需要的朋友可以参考下: 因为公司内部的接口返回的字串支持2种形式:php数组,xml;结果php数组python不能直接用,而xml字符串的格式不是标准的,所以也不能用标准模块解析.[不标准的地方是某些节点会的名称是以数字开头的],所以写个简单的脚步来解析一下文件,用来做接口测试. ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

extjs中如何用GridPanel显示xml格式的数据

问题描述 extjs中如何用GridPanel显示xml格式的数据 我代码运行时没有报错误,就是显示不出来我要的数据extjs代码如下:Ext.onReady(function(){ //Ext.BLANK_IMAGE_URL=""../Ext/resources/images/default/s.gig""; //记录类型var Person=new Ext.data.Record.create([{name:""id""m

Ajax向后台传json格式的数据出现415错误的原因分析及解决方法_AJAX相关

问题描述: ajax往后台传json格式数据报415错误,如下图所示 页面代码 function saveUser(){ var uuId = document.getElementById("uuid").value; var idCard = document.getElementById("idCard").value; alert(uuId+idCard); // var result = new Object(); // result.uuId = uuI

实现SQL Server 原生数据从XML生成JSON数据的实例代码

实现SQL Server 原生数据从XML生成JSON数据的实例代码 SQL Server 是关系数据库,查询结果通常都是数据集,但是在一些特殊需求下,我们需要XML数据,最近这些年,JSON作为WebAPI常用的交换数据格式,那么数据库如何生成JSON数据呢?今天就写了一个DEMO. 1.创建表及测试数据 SET NOCOUNT ON IF OBJECT_ID('STATS') IS NOT NULL DROP TABLE STATS IF OBJECT_ID('STATIONS') IS N