实验五 Ajax应用

实验五Ajax应用

【实验目的】

1、掌握jQuery对Ajax方法的支持；

2、掌握jQuery处理Ajax应用的常用方法；

3、掌握load、get、getJson、post等常用方法的应用。

【实验准备】

1、复习教材相关内容；

2、预习本次实验；

【实验内容】

1、实现用户注册时的用户名无刷新校验，效果如图5-1、5-2所示。(说明：用.net 实现服务器端代码的提交jQuery代码和服务器端代码，用JSP实现的提交jQuery代码和servlet中的代码)

图5-1 图5-2

代码如下：

Register.java

package com.jgj.servlet;

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;

@SuppressWarnings("serial")

public class Register extends HttpServlet {

public void doGet(HttpServletRequest request, HttpServletResponse response)

throws ServletException, IOException {

request.setCharacterEncoding("GB2312");

String uname = request.getParameter("uname");

PrintWriter out = response.getWriter();

if (uname.equals("jgj")) {// 仅起到测试作用

out.println("0");

} else {

out.println("1");

}

out.flush();

out.close();

}

public void doPost(HttpServletRequest request, HttpServletResponse response)

throws ServletException, IOException {

this.doGet(request, response);

}

}

register.jsp

<%@ page language="java" import="java.util.*" pageEncoding="GB2312"%>

<%

String path = request.getContextPath();

String basePath = request.getScheme() + "://"

+ request.getServerName() + ":" + request.getServerPort()

+ path + "/";

%>

区县：

清河区

清浦区

淮阴区

开发区

街道：

请选择...

3、在下拉列表框中选择区县名称，查询结果在表格中显示出来。整个过程中页面无刷新。效果如图5-4所示。(说明：用.net实现服务器端代码的提交jQuery 代码和服务器端代码，用JSP实现的提交jQuery代码和servlet中的代码)

图5-4

代码如下“

Data.jsp

package com.jgj.servlet;

import java.io.IOException;

import java.io.PrintWriter;

import java.util.Hashtable;

import javax.servlet.ServletException;

import javax.servlet.http.HttpServlet;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

@SuppressWarnings("serial")

public class Data extends HttpServlet {

public void doGet(HttpServletRequest request, HttpServletResponse response)

throws ServletException, IOException {

// 模拟数据库

Hashtable ht = new Hashtable();

ht.put("1", new String[] { "清河区房屋", "清河区", "2室2厅", "2", "80", "60" });

ht.put("2", new String[] { "清浦区房屋", "清浦区", "2室2厅", "2", "80", "60" });

ht.put("3", new String[] { "淮阴区房屋", "淮阴区", "2室2厅", "2", "80", "60" });

ht.put("4", new String[] { "开发区房屋", "开发区", "2室2厅", "2", "80", "60" });

// 设置编码方式

response.setContentType("text/JSON;charset=utf-8");

response.setCharacterEncoding("utf-8");

response.setHeader("Cache-Control", "no-cache");

// out对象用于写JSON数据

PrintWriter out = response.getWriter();

// 接收页面传递过来的区县编号

String districtid = request.getParameter("qxid");

// 根据区县编号查询街道信息

String[] result = ht.get(districtid);

// 定义Stringbuffer类型的对象，创建HTML，以一条信息测试使用

StringBuffer sb = new StringBuffer();

sb

.append("

");

sb.append("

");

sb.append("

");

sb.append("

");

sb.append("

");

sb.append("

");

sb.append("

");

sb.append("

房屋名称	所在区县	房型	楼层	面积	价格
" + result[0] + "	" + result[1] + "	" + result[2] + "	" + result[3] + "	" + result[4] + "	" + result[5] + "

");

// 将JSON数据写入到out对象中

out.print(sb.toString());

out.flush();

out.close();

}

public void doPost(HttpServletRequest request, HttpServletResponse response)

throws ServletException, IOException {

this.doGet(request, response);

}

}

search.jsp

<%@ page language="java" import="java.util.*" pageEncoding="gbk"%>

<%

String path = request.getContextPath();

String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";

%>

选择房屋所在区县：

清河区

清浦区

淮阴区

开发区

开始查询

【总结与体会】

通过本次实验掌握了jQuery对Ajax方法的支持、掌握了jQuery处理Ajax应用的常用方法、掌握了load、get、getJson、post等常用方法的应用，但是在操作的过程中也发现了很多的问题，在以后的学习中更加努力，争取早日做到得心应手的运用本次试验的内容。