17.12.10,web学习第二十二天,还有一年,努力吧青年Ajax

2017-12-11 18:48:57来源:CSDN作者:qq_39630225人点击

分享

js原生AjaxjQAjax

1. Ajax概述:同步和异步现象:

同步:客户端发送请求并等待服务器响应,这段时间客户端处于 卡死状态。

异步:不管服务器响应还是不响应,客户端都不会卡死。

2. Ajax运行原理:

页面发起请求,会将请求发给浏览器内部的Ajax引擎。Ajax引擎 会将请求发给服务器端。服务器将数据返回给Ajax引擎后会出 发设置的事件,从而执行js显示页面的某些功能。

3. JS可以动态修改内存当中的html代码。F12看到的是内存中的代码。

4. 服务器不知道客户端是传统请求方式还是Ajax所以乱码问题该怎么解决还是怎么解决。

5. Js原生AjaxPost请求带参数需要设置?

6. Js原生ajax了解即可。需要知道哪些东西:

客户端通过ajax引擎访问的服务器。

响应时是响应给引擎。

7. json常见的两个作用:是一种与语言无关的数据交换格式。

使用ajax进行前后的数据交换

移动端与服务器端的数据交换

8. Json的数据格式:(重点)

有两种格式可以互相嵌套。

Json的键是字符串,值是object

Jsonjs原生的内容!!!

对象格式:{“”:obj,””:obj}

数组格式:[obj,obj,obj....]

例:<script type="text/javascript">/** * 案例三 * { *   "param":[{key:value,key:value},{key:value,key:value}] * } *   *   */ var p={"param":[         {"":"","":""},         {"":"","":""}         ]	  }  alert(p.param[].)</script>

记住jQjuery$是一样的!!!9. jQAjax技术(重点)

Jq里面的参数[]代表可选参数。

有时候程序出错可能是jq引入出错通过弹窗辨别。

通过Ajax提交getpost地址栏均相同都不会显示参数。

Jq的乱码问题:post不会出现乱码,get使用编解码的方式。

Jqjs原生的ajax进行了封装,常用api如下:

$.get(url,[data],[callback],[type])

$.post(url,[data],[callback],[type])

其中,url代表请求的服务器地址。

data是请求服务器端的数据(可以是字符串也可以是json格式)

callback表示服务器端成功返回后执行的函数

Type表示服务器端传回的数据类型(jquery会根据指定的类型自动类型转 换)常用的有htmltextjson

服务器端拼接json时例:’’ 需转义/’’  {1/:/1/,/2/:/2/ 

使用Ajax访问时,如果不给出[callback]函数,即使服务器返回结 果也看不到,因为谁请求服务器就将数据返回给谁!

Getpost大致相似。但post服务器乱码问题底层已经解决,不 需要手动解决。

服务器返回中文乱码解决: response.setContexnttype(“text:html;charset=UTF-8”);

Jq文档中方法只要是$开头都是全局方法。

$.ajax(Url:xxx,Async:true,Type:”post”,Data:,Success:function(data){},Error:function(){},dataType:”json”);

例子:<script src="js/jquery-1.11.0.min.js" ></script><script type="text/javascript">window.onload=function(){$.get("demo",function(data){alert(data)});};</script>

10. 异步校验用户名是否存在

Jsjq对象绑定事件不同在于js的属性变成了jq的方法并把on去掉了。Js对象变jq对象穿外套,jq对象使用js的方法$(this)[0]

给表单添加onbulr事件,异步校验是否数据库内有此名字并返回 给出提示!

主要查看jq代码不是很熟!!!!

jq获取文本框中的值

HTML 代码:<input type="text" value="some text"/>Jsp:</style><script type="text/javascript">$(function(){$("#username").blur(function(){var text= $(this).val();$.post("checkName",{"text":text},function(data){alert(data);var i=data.p;var info="";alert(i);if(i){info="该姓名可用!";$("#sps").css("color","red");}else{info="该姓名已被注册!";$("#sps").css("color","green");}$("#sps").html(info);},"json");});});</script>Web:public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {String text = request.getParameter("text");try {int i = Service.checkName(text);boolean is=false;if (i>0) {is=false;} else {is=true;}response.getWriter().write("{/"p/":"+is+"}");} catch (SQLException e) {// TODO Auto-generated catch blocke.printStackTrace();}}Service:public static int checkName(String text) throws SQLException {return Dao.checkName(text);}Dao:public static int checkName(String text) throws SQLException {DataSource cpds = new ComboPooledDataSource();QueryRunner qr = new QueryRunner(cpds);String sql="select count(*) from user where username=?";Long l = (Long) qr.query(sql, new ScalarHandler(), text);int ll = l.intValue();return ll;}

11. 站内查询:
distinct 模糊

使用工具jsonLib转换json格式:如果是单个对象转换成json对 象使用JSONObject类。如果是集合则使用JSONArray

JSONArray fo=JSONArray.fromObject(x);

String string=fo.toString();

使用工具GsonGson gson=new Gson();

String json=gson.toJson(x);

respnse.setContentTYpe(text/html;charste=UTF-8)

response.getWriter().write(json);

框的回显排版:(难点!)

Jsp;

 

完善它:

1)鼠标离开下拉框消失:首先让这个框隐藏?

$("#showDiv").css("display","none");

2)向下选中深色条。给遍历的每一项加onmouseoveronmouseout事件,使用css给出background颜色。

<script type="text/javascript"> function overs(obj){$(obj).css("background","#f6b29f");}function outs(obj){$(obj).css("background","#fff");}function clicks(){var count="";var ids=$("#search").val();$.post("distinctSearch",{"name":ids},function(data){for (var i = 0; i < data.length; i++) {count+="<div onmouseover='overs(this)' onmouseout='outs(this)'>"+data[i]+"</div>";}$("#showDiv").html(count)},"json");};</script>

3) 点击显示框内部的条目使其添加到输入框中且关闭选择框。

$(“#?”).html();啥意思?html() 方法返回或设置被选元素的内容 (inner HTML)。

如果该方法未设置参数,则返回被选元素的当前内容。

记住input的内容通过val()属性获得和设置!!

返回设置属性值!

val() 方法返回或设置被选元素的值。

元素的值是通过 value 属性设置的。该方法大多用于 input 元素。

 

给每一个条目加一个点击事件,

效果

function clickss(obj){

$("#search").val($(obj).html());

$("#showDiv").css("display","none");

}

 

今日站内查询所有代码(不完整):

Jsp:<form class="navbar-form navbar-right" role="search"><div class="form-group" style="position:relative"><input id="search" type="text" class="form-control" placeholder="Search"  ><div id="showDiv" style="position:absolute;z-index:1000;background:#fff; width:179px;  border:1px solid #ccc;"></div></div><button type="button" class="btn btn-default" id="t" onclick="clicks()">Submit</button></form><script type="text/javascript"> function overs(obj){$(obj).css("background","#f6b29f");}function outs(obj){$(obj).css("background","#fff");}function clickss(obj){$("#search").val($(obj).html());$("#showDiv").css("display","none");}function clicks(){var count="";var ids=$("#search").val();$.post("distinctSearch",{"name":ids},function(data){for (var i = 0; i < data.length; i++) {count+="<div onclick='clickss(this)' onmouseover='overs(this)' onmouseout='outs(this)'>"+data[i]+"</div>";}$("#showDiv").html(count)},"json");};</script>Web:public class distinctSearch extends HttpServlet { public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {String parameter = request.getParameter("name");System.out.println(parameter);List<Object> ds = Service.distinctSearch(parameter);//封装成json类型response.setContentType("text/html;charset=UTF-8");JSONArray fo = JSONArray.fromObject(ds);String string = fo.toString();System.out.println(string);response.getWriter().write(string);}Service:public static List<Object> distinctSearch(String parameter) {return Dao.distinctSearch(parameter);}Dao:public static List<Object> distinctSearch(String parameter) {DataSource ds=new ComboPooledDataSource();QueryRunner qr = new QueryRunner(ds);String sql="select * from product where pname like ? limit 0,8";try {query = qr.query(sql, new ColumnListHandler("pname"), "%"+parameter+"%");} catch (SQLException e) {// TODO Auto-generated catch blocke.printStackTrace();}//for (Object jbs : query) {//System.out.println(jbs);//}return query;}

总结:js原生Ajax所用异步访问都是ajax引擎

1)jsonlib

2)Gsongoogle

3)fastjson:阿里巴

 

最新文章

123

最新摄影

闪念基因

微信扫一扫

第七城市微信公众平台