`
wangyanlong0107
  • 浏览: 486525 次
  • 性别: Icon_minigender_1
  • 来自: 沈阳
社区版块
存档分类
最新评论

jquery,ajax,jsonp例子+springmvc后台

 
阅读更多
<script src="js/jquery-1.11.1.min.js"></script>
<script>
$(function () {
        $("#username").bind('change', function () {
           /* $.ajax({
                url: "http://localhost:8080/springmvc-01/checkusername.action",
                type: "POST",
                data: JSON.stringify({
                    'username': $(this).val()
                }),//不用JSON.stringify容易报错,要传json字符串不是js对象或json字符串'{"username":'+$(this).val()+'}'
                dataType: 'json',
                contentType: "application/json",
                beforeSend: function () {
                    //alert("this is before send");
                },
                success: function (data) {
                    var hasSame = data.result;
                    if (hasSame === 'true') {
                        $('#nametips').html('<span style="color:red">用户名重复</span>');
                    } else {
                        $('#nametips').html('<span style="color:green">可以使用</span>');
                    }
                },
                error: function () {
                    alert('error');
                }
            });*/
            /*ctrl+alt+l格式化代码*/
$.ajax({
                type: "get",
async: false,
url: "http://localhost:8080/springmvc-01/checkusernamejsonp.action",
dataType: "jsonp",
data: JSON.stringify({
                    'username': $(this).val()
                }),//不用JSON.stringify容易报错
jsonp: "callback",//传递给请求处理程序或页面的,用以获得jsonp回调函数名的参数名(默认为:callback)
jsonpCallback: "aa",//自定义的jsonp回调函数名称,默认为jQuery自动生成的随机函数名
success: function (data) {
                    var hasSame = data.result;
if (hasSame === 'true') {
                        $('#nametips').html('<span style="color:red">用户名重复</span>');
} else {
                        $('#nametips').html('<span style="color:green">可以使用</span>');
}
                },
error: function () {
                    alert('fail');
}
            });
});
});
</script>



/**Jsonp跨域
	 * @param user
	 * @param callback
	 * @return
	 */
	@RequestMapping(value="/checkusernamejsonp")
	@ResponseBody
	public JSONPObject checkusernameJsonP(User user,String callback){
		for (User iUser : userSet) {
			if(iUser.getUsername().equalsIgnoreCase(user.getUsername())){
				return new JSONPObject(callback, "{\"result\":\"true\"}"); 
			}
		}
		return new JSONPObject(callback, "{\"result\":\"false\"}"); 
	}
	//返回值任意,转成json格式
	/**ajax
	 * @param user
	 * @param model
	 * @return
	 */
	@RequestMapping(value="/checkusername")
	@ResponseBody
	public String checkusername(@RequestBody User user,Model model){
		for (User iUser : userSet) {
			if(iUser.getUsername().equalsIgnoreCase(user.getUsername())){
				return "{\"result\":\"true\"}";
			}
		}
		return "{\"result\":\"false\"}";
	}

jackson三个jar包:
jackson-annotations-2.4.0.jar
jackson-core-2.4.2.jar
jackson-databind-2.4.2.jar

可以参考:http://blog.csdn.net/caiwenfeng_for_23/article/details/45300739
分享到:
评论

相关推荐

    Ajax学习:SpringMVC + JQuery + Ajax

    **Ajax学习:SpringMVC + JQuery + Ajax** Ajax(Asynchronous JavaScript and XML)技术是一种用于创建快速、动态网页的方法,它允许在不重新加载整个页面的情况下与服务器交换数据并更新部分网页内容。在这个主题...

    毕业设计,基于SSM+MyBatis+MySql+Bootstrap开发的小说阅读网站,内含Java完整源代码,数据库脚本

    后台服务器端采用spring+springmvc+mybatis框架整合。 前端页面使用bootstrap+jquery+layui等框架以及ajax技术。 数据库使用了轻量级mysql关系数据库。 小说数据源是顶点小说网,使用java的jsonp进行爬取。 本...

    基于SSM小说阅读网站设计小说爬虫设计

    后台服务器端采用spring+springmvc+mybatis框架整合。 前端页面使用bootstrap+jquery+layui等框架以及ajax技术。 数据库使用了轻量级mysql关系数据库。 小说数据源是顶点小说网,使用java的jsonp进行爬取。 本系统...

    基于SSM小说阅读网站设计小说爬虫设计+sql数据库(毕设源码).zip

    后台服务器端采用spring+springmvc+mybatis框架整合。 前端页面使用bootstrap+jquery+layui等框架以及ajax技术。 数据库使用了轻量级mysql关系数据库。 小说数据源是顶点小说网,使用java的jsonp进行爬取。 本...

    基于SSM实现的小说阅读网站设计小说爬虫设计毕业源代码+文档说明+sql文件

    后台服务器端采用spring+springmvc+mybatis框架整合。 前端页面使用bootstrap+jquery+layui等框架以及ajax技术。 数据库使用了轻量级mysql关系数据库。 小说数据源是顶点小说网,使用java的jsonp进行爬取。 本...

    2014_MLDN_Ajax视频教程链接

    8. **jQuery和其他库**:可能会介绍jQuery简化Ajax操作的方法,以及其他流行库如axios、fetch API等。 这个视频教程对于想要提升Web开发技能,尤其是希望了解和使用Ajax的开发者来说,是一份宝贵的学习资源。通过...

    java框架练习前端页面

    4. **jQuery**:jQuery是一个广泛使用的JavaScript库,它简化了DOM操作、事件处理、动画效果和Ajax交互。在这个项目中,`jquery`文件可能包含jQuery库本身,使得开发者可以更方便地编写JavaScript代码。 5. **Web**...

    SpringMVC解析JSON请求数据问题解析

    在前端,我们使用jQuery的`$.ajax`发送一个POST请求,其中包含JSON数据: ```javascript $.ajax({ type: "POST", url: "/testJson", contentType: "application/json", dataType: "json", data: JSON....

    Java3年后端工程师简历模板

    9. **前端技术**:具备HTML、JavaScript、EasyUI或LayUI的基础,理解AJAX异步交互和jQuery的jsonp跨域请求技术。 在实际工作中,该工程师在深圳市百欣办公用品连锁有限公司和深圳市优乐众惠科技有限公司的工作经历...

    兼容IE6的spring mvc框架

    3. **Ajax处理**:使用jQuery的$.ajax方法,因为它很好地兼容了IE6,同时注意处理JSONP以跨域请求。 4. **Dojo或YUI等库**:这些库专门处理老版本IE的兼容性问题,可以考虑引入以优化用户体验。 5. **文档类型声明**...

    基于SSM的健身房预约管理系统和微信小程序源码.zip

    6. **前后端交互**:系统可能采用Ajax或者JSONP等方式实现前后端异步通信,提高用户体验。前端可能使用jQuery、Vue.js等JavaScript库或框架,后端通过RESTful API接收并处理请求。 7. **安全机制**:可能涉及到用户...

    java技术点

    14. **JQuery访问服务器**:jQuery的$.ajax方法。 15. **跨域Ajax**:CORS,jsonp技术。 16. **数据库连接池**:如C3P0,Druid。 17. **ORM实体填充**:自动将数据库结果转换为Java对象。 18. **分页查询**:根据...

Global site tag (gtag.js) - Google Analytics