Ajax (Asynchronous javascript xml) 搜索框核心代码(JQuery) Ajax判断用户名存在核心代码 附:原生js的Ajax代码 其中有json的一句话解释
前端
<script type="text/javascript">
$(function(){
$("#tid").keyup(function(){
//获取当前输入 的值
var value=$(this).val();
//偷偷摸摸发起请求
var url="${pageContext.request.contextPath }/like"
var params="name="+value;
//先清空下方div
$("#did").empty();
$("#did").hide();
if(value){
//有输入值才发请求
$.post(url,params,function(data){ /* $.each(data,function(index,element){
var content=element.name;
var div="<div onmouseover='m1(this)' onmouseout='m2(this)' onclick='m3(this)' style='text-align:left;' >"+content+"</div>";
$("#did").append(div);
});
$("#did").show() */ $(data).each(function(index,element){
alert(element.name);
var div="<div style='text-align:left' onmouseover='m1(this)' onmouseout='m2(this)' onclick='m3(this)'>"+element.name+"</div>";
$("#did").append(div);
})
$("#did").show(); },"json")
}
})
}) function m1(obj){
//修改css样式
$(obj).css("background-color","#ccc");
}
function m2(obj){
$(obj).css("background-color","white");
}
function m3(obj){
//选中 把自己添加到输入框中
var text=$(obj).text();
$("#tid").val(text);
$("#did").empty();
$("#did").hide();
} </script>
后端返回给前端的内容在$.post这个Ajax请求的第三个参数function(data)的data中
data的数据交换格式是json
json有数组[value,value ]和对象{"key":value,"key":value }两种形式 其中value可以为任意类型,所以就出现了各种千变万化的组合,解析的时候看外层 (使用json-lib jar包)
后端
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
try {
// 编码
response.setContentType("text/html;charset=utf-8");
// 获取name参数
String name = request.getParameter("name");
// 调用service查询相关
List<KeyWord> keys = new KeyWordservice().findByName(name);
// 写回去给你
for (KeyWord key : keys) {
System.out.println(key);
}
JSONArray key_json = JSONArray.fromObject(keys);
System.out.println(key_json);
response.getWriter().print(key_json.toString());
} catch (SQLException e) {
e.printStackTrace();
response.getWriter().print("");
}
}
Ajax判断用户名存在核心代码(使用JQuery)
<script> //页面加载
$(function(){
$("#errorId").hide();
$("#successId").hide(); $("#username").blur(function(){
$("#errorId").hide();
$("#successId").hide();
//获得值
var username = $("#username").val(); if(username){
//ajax访问服务器
$.get("${pageContext.request.contextPath}/CheckUserNameServlet","username="+username,function(data){
if(data>0){
//失败
$("#errorId").show();
$("#successId").hide();
}else{
//成功
$("#errorId").hide();
$("#successId").show();
}
});
}
});
}) </script>
<div class="form-group">
<label for="username" class="col-sm-2 control-label">用户名</label>
<div class="col-sm-6">
<input type="text" class="form-control" id="username" name="username" placeholder="请输入用户名">
</div>
<div class="col-sm-4">
<span id="successId" class="label label-success">用户名可用</span>
<span id="errorId" class="label label-danger">用户名不可用</span>
</div>
</div>
附:原生js的Ajax代码
<input type="button" onclick="sendGet()" value="请求"/> <br/> <script type="text/javascript">
function sendGet(){ //1 获得ajax引擎
var xmlhttp=null;
// 谷歌、火狐、IE最新浏览器
if (window.XMLHttpRequest){
xmlhttp=new XMLHttpRequest();
}else if (window.ActiveXObject){
//IE老版本浏览器(IE6、7、8 等)
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
} //2 设置回调函数
xmlhttp.onreadystatechange = function(){ alert(xmlhttp.readyState);
if(xmlhttp.readyState == 4){
if(xmlhttp.status == 200){
alert("响应数据" + xmlhttp.responseText);
}
}
};
//3 确定请求方式、路径及参数
/* xmlhttp.open("GET","/2level_daan/hello?username=jack&password=1234"); */
xmlhttp.open("POST","/2level_daan/hello"); //4 设置请求编码
xmlhttp.setRequestHeader("content-type","application/x-www-form-urlencoded");//get 不需要 //4 发送请求
/* xmlhttp.send(null); */
xmlhttp.send("username=杰克&password=1234"); }
</script>
Ajax (Asynchronous javascript xml) 搜索框核心代码(JQuery) Ajax判断用户名存在核心代码 附:原生js的Ajax代码 其中有json的一句话解释的更多相关文章
- AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML)。
AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML). AJAX 不是新的编程语言,而是一种使用现有标准的新方法. AJAX 最大的 ...
- [javascript]原生js实现Ajax
一.首先看JQuery提供的Ajax方法: $.ajax({ url: , type: '', dataType: '', data: { }, success: function(){ }, err ...
- 原生js实现Ajax的原理。
Ajax(Asynchronous JavaScript and XML)表示异步的js与xml. 有别于传统web的同步开发方式. 原理:通过XMLHttpRequest对象向服务器发送异步请求,从 ...
- Ajax工作原理和原生JS的ajax封装
前言: 之所以用ajax作为博客的开篇,是因为无论从ajax的出现还是从它的作用上来说,ajax对于前端无疑是意义重大的.甚至可以说,是ajax带来了前端这个行业.当然,历史并不能说明当下,曾经的辉煌 ...
- 原生js实现ajax封装
一.什么是ajax? 定义:Ajax(Asynchronous Java and XML的缩写)是一种异步请求数据的web开发技术,在不需要重新刷新页面的情况下,Ajax 通过异步请求加载后台数据,并 ...
- 用原生js实现ajax、jsonp
转载: http://www.cnblogs.com/yangheng/p/6065910.html 一.原生js实现ajax $.ajax({ url: '', type: 'post', data ...
- 原生JS发送Ajax请求、JSONP
一.JS原生Ajax Ajax=异步Javascript+XML: ajax是一种数据请求的方式,不需要刷新整个页面.这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新. ajax的核心 ...
- 原生JS实现Ajax及Ajax的跨域请求
前 言 如今,从事前端方面的程序猿们,如果,不懂一些前后台的数据交互方面的知识的话,估计都不太好意思说自己是程序猿.当然,如今有着许多的框架,都有相对应的前后台数据交互的方法. ...
- 原生js实现ajax与jquery的ajax库,及json
这是一篇笔记博客, Ajax: 和服务器进行数据交换(异步) 用js实现复杂的原理:用于发送请求的对象在不同的浏览器中是不同的 同源策略:ajax发送请求的url地址与服务器地址必须是同一域名,协议, ...
随机推荐
- Monkey King(左偏树 可并堆)
我们知道如果要我们给一个序列排序,按照某种大小顺序关系,我们很容易想到优先队列,的确很方便,但是优先队列也有解决不了的问题,当题目要求你把两个优先队列合并的时候,这就实现不了了 优先队列只有插入 删除 ...
- jemalloc报 Unsupported system page size错误
- Sean McGinnis
* Loaded log from Wed Nov 25 22:19:43 2015 * Now talking on #openstack-smaug* [smcginnis] (~smcginni ...
- kindEditor完整认识 PHP上调用并上传图片说明
最近又重新捣鼓了下kindeditor,之前写的一篇文章http://hi.baidu.com/yanghbmail/blog/item/c681be015755160b1d9583e7.html感觉 ...
- 【input】——数据传入后台
1.复选框 checkbox <label class="checkbox"> <input type="checkbox" name=&qu ...
- plsql窗口列表保持
使用plsql窗口列表保持方法如下: 1.工具——首选项——用户界面——自动保存桌面 选一下此项就保存你当前的窗口布局了,下次启动就不用再设置了. 英语版自己对照.
- JS 类似contains方法,用indexOf实现
js提供了另一个方法indexOf: str.indexOf("substr") != -1; 如果上面这个表达式为true,则包含,反之则不包含.
- MVC之ViewData.Model
在MVC中前台Razor视图呈现数据的方式不止一种.举个简单的Demo,我们要把用户信息呈现给人民. 一.ViewData.Model的使用,先简单写一下Razor @model User---- ...
- intellijidea课程 intellijidea神器使用技巧 3-2 livetemplate
创建livetemplate分组: ctrl shift a ==> live templates ==> + ==> templates group 创建livetemplate模 ...
- div的浮动(float)
什么是浮动 浮动,故名思议,就是移动位置. 之所以不叫移动,而叫浮动,那是因为给元素设置浮动后,元素会浮到文档上面来,术语叫脱离文档流. 例子 下面我们看例子 <html> <hea ...