Day19_Jquery及其AJax，Json数据示例

最新推荐文章于 2024-10-05 19:40:46 发布

Dxkr_CB

最新推荐文章于 2024-10-05 19:40:46 发布

阅读量98

点赞数

文章标签： jquery ajax json

本文链接：https://blog.csdn.net/Dxkr_CB/article/details/125162875

版权

Jsp本身需要用<% JAVA程序 %>来书写java程序并执行

${}是一种简写格式，封装了<%%>但是本质上还是调用了java程序，所以他才能和servlet一样来使用请求对象。

$（" 标签对象"）是用来获取jquery对象的

一、json对象与原生js对象的相互转化

页面代码：

<body>
    <input type="button" id="JS" value="我是JS按钮" onclick="change()"><br>
    <input type="button" id="JQuery" value="我是JQuery按钮">
</body>

转换代码：

<script>
//js转jquery
    function change() {
        var js = document.getElementById("JS");
        var $js = $(js);
        $js.val("我被修改为了jQuery按钮");
    }
//jquery转js
//需要先写出 $(function (){  jquery代码  });    完成初始化
    $(function () {
        $("#JQuery").click(function () {
            var jquery  = $("input").get(1);
            jquery.value="我被修改为了JS按钮";
        });
    });
</script>

二、jquery选择器

1、基本选择器：（与css基本相同）

$("#b1")：选择id为b1的样式生成jquery对象；
$(".b1")：选择class为b1的样式生成jquery对象；
$("input")：选择便签为input的样式生成jquery对象；

2、层级选择器与属性选择器见百度
3、文本值的使用

Jquery提供的
        html():---原生Js标签对象的innerHTML属性:设置能够被html渲染的文本
        text():---原生Js标签对象的innerText属性:设置普通文本
        val():获取文本输入框/按钮,默认的属性值---原生js标签对象value属性
        val("xx"):给文本输入框/按钮设置内容

<script>
    //页面载入事件
    $(function () {
        //给id="d1"设置文本内容，使用html标签解析
        $("#d1").html("<h3>这是一个块标签</h3>") ; 
        //输入框中输入完内容之后,触发失去焦点事件,获取文本输入的内容
        //获取文本输入的内容---Jquery的方法val()---获取对应的value属性
        $("#name").blur(function () { //监听失去焦点事件
           var username =  $("#name").val() ;
           alert(username) ;
        }) ;
    }) ;
</script>

4、jquery的文档处理

Jquery的dom之文档处理
1)对象1.append(对象2):将对象2这个元素追加对象1的后面
2)对象2.appendTo(对象1):将对象2这个元素追加对象1的后面
3)对象1.prepend(对象2):将对象2追加对象1的前面
4)对象2.prependTo(对象1):将对象2追加对象1的前面
5)对象1.after(对象2):将对象插入到对象的1的后面

5、原生ajax

   <script>
            //页面载入事件
        $(function () {
            //alert("页面载入事件处理了") ;
            //给id="btn"标签对象设置点击事件
            $("#btn").click(function () {
                //alert("点击事件触发") ;
                //原生Ajax的操作步骤
                //1)创建浏览器代理对象
                //创建 XMLHttpRequest 对象
                var xhttpRequest;
                if (window.XMLHttpRequest) {
                    //IE7+,firefox,chrome...
                    xhttpRequest = new XMLHttpRequest();
                } else {
                    // code for IE6, IE5 :低版本Ie浏览器
                    xhttpRequest = new ActiveXObject("Microsoft.XMLHTTP");
                }
                //http://localhost:8080/xxx/regist?username=xx :get方式就可以地址栏携带参数
                //2)建立连接  ---open() ---->发送请求:默认get
                //open(method, url, async)
                //参数1:请求方式
                //参数2:后台的servlet的地址(后台接口地址)
                //参数3:是否是异步,默认值true(异步)
                // xhttpRequest.open("get","http://localhost:8081/Maven_01_war/myAjax?username=tom&password=7560",true) ;
                //post提交
                xhttpRequest.open("post","http://localhost:8081/Maven_01_war/myAjax",true) ;
                //3)发送send()
                // xhttpRequest.send() ; //get方式发送
                //post发送设置ajax的post的请求头:固定写法
                xhttpRequest.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
                xhttpRequest.send("username=亓桑&password=7560");
                //4)接收服务器响应的数据
                //onreadystatechange:服务器响应给浏览器中的代理对象xhttpRequest的回调函数
                //回调函数业务:就是考虑属性:readyState响应的状态 的值 是4 (请求完成,响应就绪)
                            //status:响应状态200响应成功
                xhttpRequest.onreadystatechange = function(){
                    if(this.readyState==4 && this.status==200){
                       var content =  this.responseText ;
                        alert(content) ;
                    }
                }
            }) ;
        }) ;
    </script>

6、jquery中ajax的使用方式一

<script>
    //页面加载事件
    $(function () {
        $("#btn").click(function () {
            //ajax实际上用了key:value格式:键值对格式（JSON）
            $.ajax({
                //不加载jsp没有办法用${}
                url:"http://localhost:8081/Day19_Jquery_AJax_war/MyAjax?username=高圆圆",
                //提交方式
                type:"post",
                //提交数据
                data:{password:"7560",array:"2020"},
                // data:{password:"7560",array:["2020","2019"]},不可用但是是json的数组格式
                //{}里面是一个对象的东西,[]里面是数组的东西
                //预期服务器返回的数据类型。
                dataType:"text",
                success:function (data) {//data代表相应的数据,仅为变量名可随意更改
                    if(data=="1"){
                        alert("获取数据成功"+data) ;
                    }else{
                        alert("获取数据失败"+data) ;
                    }
                }
            });
        });
    });
</script>