AJAX向服务器发送请求并返回json数据

这里想实现的功能大概是这样:类似注册时,用户名已经被注册了的情况。当用户失去焦点的时候利用AJAX发送请求到服务器端,服务器端进行数据库查询,如果有相同的用户名则页面提示用户名已被注册了,不能用,否则就通过注册。

这里用的是Jquery AJAX以及SSH框架,下面是我的实现步骤:

先引入struts-json的jar包

1、注册页面中添加JS方法调用

<span id="tip" style="color:red"></span>
	<s:form action="Register">
		<s:textfield id="username" name="username" label="用户名" onblur="validatename()"/>
		<s:password name="password" label="密码" />
		<s:submit value="注册" />
	</s:form>

jquery方法如下:其中url为请求的地址,type为http请求方法,data为发送到服务器的参数,dataType为返回的数据类型,success为请求成功后的回调函数,如果要设置无论请求是否成功都回调可以设为complete

<script language="JavaScript">
function validatename(){
	var user="username="+$('#username').val();
	$.ajax({
		url:"ValidateName.action",
		type:'post',
		data:user,
		dataType:'text',
		success:processResponse
	});
}
function processResponse(msg){
	var data = eval("("+ msg+")");
	$("#tip").html(data.tip);
}
</script>

在此说一下,这里的dataType返回类型为text,回调函数中才可用eval解析这个json数据,用dataType:‘json‘的话返回的是一个对象,用eval会报js错误

2、接下来编写action类

private String username;
	private String password;
	private String tip;
	private LoginService ls;

	public String execute() {
		try {
			if (ls.validateName(getUsername())) {
				setTip("你输入的用户名" + getUsername() + "已被注册!");
			} else {
				setTip("你的用户名" + getUsername() + "可用!");
			}
		} catch (Exception e) {
			setTip(e.getMessage());
		}
		return SUCCESS;
	}

3、持久层LoginDaoImpl类中添加一个验证用户名的方法,其他的跟之前的博客写的改改

public boolean validateName(String name){
		try {
			List list=(List) getHibernateTemplate().find("from Login a where a.username = ?", name);
			if(list!=null && list.size()>0){
				return true;
			}else{
				return false;
			}
		} catch (Exception e) {
			e.printStackTrace();
			return false;
		}
	}

这里要特别说明一下,from后面的Login是我们的实体类,并不是表名字,我一开始写的是login(表名字),调试中发现当执行到这一句是说tomcat报login没有映射的错误

4、配置文件在此就不多说了,关键说下struts配置,需要继承json-default包,做点小改动,改为:

extends="json-default,struts-default"
<action name="ValidateName" class="validateNameAction">
			<result type="json"></result>
		</action>

result类型设为json

5、测试,输入数据库里已经存在的用户名,页面提示用户名已存在,不用注册

版权声明:本文为博主原创文章,未经博主允许不得转载。

时间: 2024-10-13 02:58:29

AJAX向服务器发送请求并返回json数据的相关文章

jQuery通过Ajax向PHP服务端发送请求并返回JSON数据

ON(JavaScript Object Notation) 是一种轻量级的数据交换格式.易于人阅读和编写,同时也易于机器解析和生成.JSON在前后台交互的过程中发挥着相当出色的作用.请接着往下看教程. XHTML  <ul id="userlist">    <li><a href="#" rel="1">张三</a></li>    <li><a href=&quo

AJAX向服务器发送请求

原生的: 1.>:GET请求 $(function () { $("#btnGetDate").click(function () { //开始通过AJAX向服务器发送请求. var xhr; if (XMLHttpRequest) {//表示用户使用的高版本IE,谷歌,狐火等浏览器 xhr = new XMLHttpRequest(); } else {// 低IE xhr=new ActiveXObject("Microsoft.XMLHTTP"); }

通过jquery的ajax异步请求接收返回json数据

jquery的ajax异步请求接收返回json数据方法设置简单,一个是服务器处理程序是返回json数据,另一种就是ajax发送设置的datatype设置为jsonp格式数据或json格式都可以. 代码示例如下: $('#send').click(function () { $.ajax({ type : "GET", url : "a.php", dataType : "jsonp", success : function (data) { $.

【03】AJAX 向服务器发送请求

AJAX 向服务器发送请求 创建 XMLHttpRequest 对象后,就可以向服务器发送请求了. XMLHttpRequest 对象的 open() 方法和 send() 方法用来向服务器发送请求. 注意:AJAX 向服务器发送的是 http 请求,与我们浏览网页时发送的 http 请求一样.我们可以右键查看当前网页的源代码,由很多 HTML.CSS和JavaScript 组成,如果我们使用 AJAX 请求当前的 URL ,返回的内容是一样的.(魔芋:也就是说ajax发送的,和我们平时输入网址

Mock服务端:客户端Get请求,返回json数据两种方式

Mock服务端:客户端Get请求,返回json数据两种方式:1,直接在response中返回json数据 2,通过json文件返回: 准备工作: wiremock-body-transformer-1.1.6.jar wiremock-standalone-2.14.0.jar 安装java运行环境(jdk等) 一,直接在response中返回: 说明: mappings : 对应请求request位置 __files : 对应响应reponse位置 mappings中增减文件:get.json

.NET发送请求,携带json数据

/// <summary> /// 发送请求 /// </summary> /// <param name="Uri">请求地址</param> /// <param name="JsonStr">json数据</param> /// <returns></returns> public static string ClientRequest(string Uri, st

ajax实现二级联动(服务器端返回json数据)

实现效果为上图 HTML 代码: 1 省份:<select id="province" onchange="getCity();"> 2 <option >请选择--</option> 3 </select> 4 城市:<select id="city"> 5 <option>请选择--</option> 6 </select> xmlHttp.js

highcharts php请求mysql返回json数据作为数据源进行制图

直接上代码 [官方文档请参见http://www.highcharts.com/docs/working-with-data/getting-data-across-domains-jsonp] [实例http://highcharts-mzm.rhcloud.com/] 1.index.html <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content=&quo

Django返回json数据用法示例

最近在写前端ajax发送请求到后台,结果数据提交成功,但是一直未执行成功回调函数,经过多番查找资料,终于找到答案. 本文实例讲述了Django返回json数据用法.分享给大家供大家参考,具体如下: 1.前端.jQuery发送GET请求,并解析json数据.getJSON方法可参考这里. ? 1 2 3 4 5 url = "http://example/?question=" + question + "&rand=" + Math.random(); $.