热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

jQuery中使用JSON的示例代码

1、在HTML中,有这样一个表单:formmethodpostnamesearchformidsearchformmethod/sek.goinputnamequeryvaluetypetextidquery/inputtype”submit”value查询/input/form当然,要想在HTML中使用Js功能,必须

1、在HTML中,有这样一个表单:

 

 

 

 

当然,要想在HTML中使用Js功能,必须在中加入

 

2、然后在ajax.js文件中加入如下代码

function userSearch(){  

var query = $("#searchform input[@name='query']").val();   

$.post("/userSearch.htm", { query: query } ,function callback(json){  

var userlist = $.parseJSON(json);  

userList(userlist);  

});   

}  

解释如下:

1)、"#searchform input[@name='query']";的意思是: 选择id为searchform其下的(name属性值为’query’的)input标签

2)、$(“”).val()意为要得到(“”)所选中属性的值;

3)、在$.post()中,第一项参数是指定目标servlet,即要把本post请求发给的那个servlet。

第二项是本post请求所携带的数据;“:”前的为key或者name,后为value;

第三项是回调函数,其内若有形参,则表示要对从servlet返回的值进行处理,这里的callback的功能是将JSON对象json转换成了JS对象userlist,然后将JS对象传入函数userList

3、post请求携带了名为query的参数去了后台,在servlet中进行处理:

//从名为"query"能的参数中取出post带过来的数据  

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

if (query != null && !query.isEmpty()  

&& !query.trim().equalsIgnoreCase("")) {  

//如果"query"的值不为空,就用'query'为参数构建HQL语句  

String hql = "from TUser as user where user.userName like '"+ query + "%'";  

//到库表TUser中进行查询,并得到一个表结构  

List list = weilav3TUserDAO.getListByHQL(hql);  

if (list != null && !list.isEmpty()) {  

//若list不为空,则将其转换成JSON对象,并存入jsonArray中  

JSONArray jsonArray = JSONArray.fromObject(list);   

//下面就是把存有查询结果的JSON对象返给页面  

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

PrintWriter out = response.getWriter();  

out.println(jsonArray);  

……  

}else {……} 


推荐阅读
  • 前言--页数多了以后需要指定到某一页(只做了功能,样式没有细调)html ... [详细]
  • 当unique验证运到图片上传时
    2019独角兽企业重金招聘Python工程师标准model:public$imageFile;publicfunctionrules(){return[[[na ... [详细]
  • 本文将详细介绍如何在ThinkPHP6框架中实现多数据库的部署,包括读写分离的策略,以及如何通过负载均衡和MySQL同步技术优化数据库性能。 ... [详细]
  • 本文探讨了浏览器的同源策略限制及其对 AJAX 请求的影响,并详细介绍了如何在 Spring Boot 应用中优雅地处理跨域请求,特别是当请求包含自定义 Headers 时的解决方案。 ... [详细]
  • 使用 Azure Service Principal 和 Microsoft Graph API 获取 AAD 用户列表
    本文介绍了一段通用代码示例,该代码不仅能够操作 Azure Active Directory (AAD),还可以通过 Azure Service Principal 的授权访问和管理 Azure 订阅资源。Azure 的架构可以分为两个层级:AAD 和 Subscription。 ... [详细]
  • 探讨了如何解决Ajax请求响应时间过长的问题。本文分析了一个从服务器获取少量数据的Ajax请求,尽管服务器已经对JSON响应进行了缓存,但实际响应时间仍然不稳定。 ... [详细]
  • 本文详细介绍了如何使用 HTML 和 CSS 对文件上传按钮进行样式美化,使用户界面更加友好和美观。 ... [详细]
  • 一个登陆界面
    预览截图html部分123456789101112用户登入1314邮箱名称邮箱为空15密码密码为空16登 ... [详细]
  • 本文详细介绍了如何利用Go语言和WebSockets技术构建一个高效的实时聊天系统。随着网络应用的日益复杂化,实时交互成为了提升用户体验的关键要素之一。通过本指南,开发者可以学习到最新的技术和最佳实践。 ... [详细]
  • 本文探讨了2019年前端技术的发展趋势,包括工具化、配置化和泛前端化等方面,并提供了详细的学习路线和职业规划建议。 ... [详细]
  • 在Web开发过程中,Ajax技术常用于前后端数据交互。其中一个重要的属性async决定了请求是否以异步方式执行,本文将详细解析async属性的作用及使用方法。 ... [详细]
  • 本文深入探讨了JavaScript中实现继承的四种常见方法,包括原型链继承、构造函数继承、组合继承和寄生组合继承。对于正在学习或从事Web前端开发的技术人员来说,理解这些继承模式对于提高代码质量和维护性至关重要。 ... [详细]
  • 本文探讨了如何通过WebBrowser控件在用户点击输入框时自动显示图片验证码。该过程可能涉及JavaScript事件的触发与响应。 ... [详细]
  • 深入解析ES6至ES8的新特性与应用
    本文详细介绍了自2015年发布的ECMAScript 6.0(简称ES6)以来,JavaScript语言的多项重要更新,旨在帮助开发者更好地理解和利用这些新特性进行复杂应用的开发。 ... [详细]
  • 本文将介绍如何利用Python爬虫技术抓取国内主流在线学习平台的数据,并以51CTO学院为例,进行详细的技术解析和实践操作。 ... [详细]
author-avatar
diuhunpo_813
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有