Ajax Jquery 跨域问题 事件冒泡 浏览器默认操作

JQUERY 介绍

就是第三方的提供的JS的核心库，通NodeJs ，AngularJS一类的，对原来的js进行二次封装有自己的语法结构特点，在Eclipse上面编码的时候没有提示，提示的时候不准确坑，建议用HBuild编码后在复制过去。

关于使用的话 就去查API吧

JQuery中的Ajax

Ajax的概念

ajax就是在页面中局部去完成服务端交互技术的框架，代码嵌入到浏览器中，效率高

原理图

常用的get ，post,$.ajax

//异步请求浏览器不会帮你进行默认编码，因此需要手动编码 var parm = {“username”:encodeURI(name)};

1. get方式

当以json格式的返回的是JSON对象

// url,param,回调函数,回掉类型
$.get("${ pageContext.request.contextpath }/ServletDemo1",{"name":"aaa","pass":"123"},function(data){
                $("#d1").html(data);}，"json")

2. post方式

$.post("${ pageContext.request.contextpath }/ServletDemo1",function(data){
                $("#d1").html(data);
            },"json");

3. ajax异步请求 两种请求拼接的param是不同的

$.ajax({
                url:"${ pageContext.request.contextpath }/ServletDemo1",data:"name=bbb&pass=abc",type:"get",success:function(data){
                    $("#d1").html(data);
                },error:function(data){
                },});

JQuery常见几个问题

1. 表单序列化

alert($(“form”).serialize());对于表单中提交的数据会拼接成为一个字符串

alert($(“form”).serializeArray()); 会拼接成一个字符数组

$(document).ready(function(){

            alert($("form").serialize());
            alert($("form").serializeArray());
        });

2. 事件冒泡

就类似于android中的事件传递效果相同，大框中有小框，点小框 大框也会执行

$(document).ready(function(){

            // 事件冒泡：子元素事件执行时，一并触发父元素相同的事件
            $("#outerDiv").click(function(){
                alert("outerDiv");
            });
            $("#innerDiv").click(function(event){
                alert("innerDiv");
                //方式1：
                //return false;
                //方式2：通过event 提供函数
                event.stopPropagation();
            });
        });

3. 浏览器默认动作

就是禁用a标签的跳转到ref 对应的连接处

$(document).ready(function(){
            // href a标签默认行为，阻止
            $("a").click(function(event){
                alert("谈谈谈");
                //方式1：
// return false;
                //方式2：
                event.preventDefault() ;
            });
        });

4. 跨域问题

概述

两台服务器直接的交互数据的时候用到跨域

跨域两种类型

1. JS的跨域问题

JS的跨域原理图

代码如下
TomCat1的jSP代码如下

<!-- 需要将函数存在 调用之前，从而保存函数存在-->
    <script type="text/javascript"> function showData(data){ alert(data.success); } </script>
    <script type="text/javascript" src="http://localhost/web/getData?callback=showData"></script>

TomCat2的Servlet代码如下

//编码
        response.setContentType("application/json;charset=UTF-8");

        //1 请求参数，获得函数名称
        String callback = request.getParameter("callback");

        //2 数据
        String jsonStr = "{\"success\":\"用户操作成功\",\"info\":\"提示信息\"}";

        //3发送浏览器，通知tomcat1，执行执行函数 print("函数(参数)"); ，格式必须按照下面的来
        response.getWriter().print(callback + "("+jsonStr+")");

2. Jquery中的AJAX跨域问题

Jquery中的AJAX原理图

相当于是一个匿名函数的问题 将名字去掉而已

$.getJSON("http://localhost/web/getData?callback=?",function(data){
            alert(data.success)
        });