AjAx与数据库的交互,一般返回的是字符串, 常见的js解析有 文本解析,xml格式解析,json解析
1,在ajax与后台的交互中经常会出现乱码,
解决办法: 在后台获取数据的时候要改变其编码
//获取jsp页面传递过来的userName
String user= request.getParameter("userName"); //使用String来改变获取到的字符集编码 String userid = new String(user.getBytes("iso8859-1"),"GBK");
2,文本解析 http://baihe747.iteye.com/blog/2164311
3,js解析xml格式的数据 例子: xml动态检查用户名是否存在
后台代码:
/**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界面代码
<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格式动态检查用户名是否存在
后台关键代码;
//接受数据 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前台代码;
<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>
相关推荐
Ajax(Asynchronous JavaScript and XML)技术是现代Web开发中的关键组成部分,它允许在不刷新整个页面的情况下与服务器进行异步数据交互。Servlet是Java Web开发中的一个标准,用于处理和响应HTTP请求。在这个实例...
在这个"ajax+jsp+servlet 中文解决方法"的示例中,开发者遇到了在使用Ajax进行数据交互时中文乱码的问题。中文乱码通常是由字符编码不一致导致的,特别是在跨平台或跨浏览器通信时。以下是一些关于如何解决这个问题...
本实例将探讨如何在Java后端和Ajax前端交互过程中解决字符编码问题,防止出现乱码。 在Java中,处理字符编码的关键在于正确设置输入流和输出流的编码。当接收到Ajax请求时,服务器需要正确识别请求中的编码,同时在...
下面将详细解释Ajax与Servlet交互的原理和具体实现。 Ajax的核心是JavaScript,它允许在后台与服务器进行通信,而无需刷新整个网页。在给出的实例中,Ajax通过XMLHttpRequest对象与Servlet进行数据交换。以下是对...
解决AJAX请求中的中文乱码问题,关键在于确保客户端和服务端之间数据编码的一致性。通过在客户端使用合适的编码函数,在服务器端正确解析请求数据,或者使用过滤器统一处理所有请求数据,都可以有效地避免中文乱码的...
在开发过程中,Ajax(异步JavaScript和XML)技术常常用于实现网页的无刷新交互,但与之相伴的一个常见问题是中文乱码。以下是一些解决Ajax中文乱码问题的方法: 1. **请求头设置**: 当发送Ajax请求时,需要确保...
Struts2是一个非常流行的Java Web框架,用于构建和维护可扩展且模块化的MVC(Model-...通过正确配置过滤器、`struts.xml` 和使用JSON插件,可以有效地管理和解决Web应用中的编码问题,同时提高数据交互的效率和灵活性。
在AJAX与JSP的结合中,JSP作为服务器端技术负责处理业务逻辑和数据处理。JSP可以使用Java脚本来处理请求,执行数据库查询、计算或其他任何需要的任务,然后将结果以适合AJAX请求的格式返回。例如,服务器端可能返回...
在使用Ajax进行前后台数据交互时,编码方式的设置至关重要,因为这直接影响到数据的正确传输和解析。本文将详细讲解如何在Ajax回调函数中设置编码方式,以便正确接收后台传输的数据。 首先,我们来看一个使用jQuery...
JSON(JavaScript Object Notation)是轻量级的数据交换格式,常用于前后端交互,这部分内容没有在提供的部分中详细展开,但通常包括JSON的语法、序列化与反序列化、以及AJAX(Asynchronous JavaScript and XML)...
为了解决AJAX回调函数返回的字符串乱码问题,开发者可以在服务器端设置响应内容类型和字符编码,以确保数据的正确传输和解析。根据提供的文件内容,这里涉及到一个关键的操作步骤: 1. 在服务器端,无论是使用...
此外,尽管名字中包含XML,但Ajax同样支持JSON、纯文本等其他数据格式。 #### Ajax的基本原理与使用方式 1. **创建`XMLHttpRequest`对象**:这是实现Ajax通信的第一步。在不同的浏览器中,创建这个对象的方式略有...
5. **数据传输格式**:如果你的响应内容是JSON或其他非纯文本格式,确保这些格式的规范要求的编码方式也与你设置的一致。 6. **浏览器兼容性**:不同浏览器对编码的支持可能存在差异,因此在调试时需要考虑各种主流...
在Web开发中,Ajax(Asynchronous JavaScript and XML)技术被广泛用于实现网页的异步更新,即在不刷新整个页面的情况下与服务器交换数据并局部更新页面内容。本篇文章将深入探讨如何使用Ajax接收后台数据并在HTML...
- **JSON** (JavaScript Object Notation) 是一种轻量级的数据交换格式。 - 它易于人阅读和编写,同时也易于机器解析和生成。 ### 34. jQuery - **jQuery** 是一个快速、简洁的JavaScript库。 - 它极大地简化了...
Ajax (Asynchronous JavaScript and XML) 是一种异步数据交互技术,能够实现网页的部分更新而无需刷新整个页面。 - **实现原理**:通过JavaScript创建`XMLHttpRequest`对象,发送异步请求到服务器端,服务器端处理...
在Google和百度等搜索引擎中,这一功能是通过Ajax(Asynchronous JavaScript and XML)实现的,它允许网页在不重新加载整个页面的情况下与服务器交换数据并更新部分网页内容。 在J2EE环境下,实现这个功能通常需要...
2. **配置SpringMVC**:编写`dispatcher-servlet.xml`,配置SpringMVC的DispatcherServlet,定义视图解析器、模型数据绑定、处理器映射器等。 3. **配置MyBatis**:创建MyBatis的配置文件`mybatis-config.xml`,以及...
- 与AJAX交互通常通过`@ResponseBody`或JSON处理。 **处理中文乱码**: POST请求通过设置Filter解决,GET请求可以通过设置`CharacterEncodingFilter`。 **异常处理**: 可以自定义异常处理器,比如使用@...