js、jquery中的get post ajax汇总

最新推荐文章于 2024-04-04 00:25:17 发布

jeffrey_ding

最新推荐文章于 2024-04-04 00:25:17 发布

阅读量391

点赞数

分类专栏： web前端文章标签： jQuery选择器 jQuery get post ajax

本文链接：https://blog.csdn.net/jerryDzan/article/details/90603843

版权

web前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

get和post的区别

1.安全性：get是通过http协议的header发送请求，所以会将参数拼接在地址栏中，所以安全性很差；post是通过http协议的body发送请求，地址栏中并不会出现，所以相对安全；还有一点，用get方法发送请求会被客户端浏览器缓存，通过查看历史记录可以查看到用户信息，所以非常不安全。
2.传送大小：get只能传送2kb，而post一般不受限制
3.效率：get效率高，post效率低
4.get就是为了从服务器得到数据，而post则是发送数据
5.GET产生一个TCP数据包；POST产生两个TCP数据包。对于GET方式的请求，浏览器会把http header和data一并发送出去，服务器响应200（返回数据）；而对于POST，浏览器先发送header，服务器响应100 continue，浏览器再发送data，服务器响应200 ok（返回数据）。

js实现ajax

   //get
   function get() {
          //创建XMLHttpRequest
      let xhr = new XMLHttpRequest();
          //监听响应
      xhr.onreadystatechange = function () {
      if (xhr.readyState === 4 && (xhr.state === 200 || xhr.state === 304)) {
      console.log(xhr.responseText);
      }
      };
      xhr.open("GET","/try/ajax/ajax_info.txt",true);
      xhr.send();
    }

    //post
    function post () {
          //请求参数、url、创建XMLHttpRequest
      let data = 'name=tom&age=18',
      url = 'xhr.php',
      xhr = new XMLHttpRequest();

      xhr.open('post', url);
          //设置header
      xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
      xhr.send(data);
      xhr.onreadystatechange = function () {
      if (xhr.readyState === 4 && ( xhr.state === 200 || xhr.state === 304 )){
      console.log(xhr.responseText);
      }
    }
    }

jquery中get post ajax

jquery.ajax([settings])。发请求并且能得知成功还是失败。

    type:类型，"POST"或者"GET"，默认是"GET"。
    url:发送请求的地址。
    data：是一个对象，连同请求发送到服务器的数据
    dataType：预期服务器返回的数据类型。如果不指定，jQuery将自动根据HTTP包含的MIME信息来智能判断，一般我们采用json个数，可以设置为"json"。
    success:是一个方法，请求成功后的回调函数。传入返回后的数据，以及包含成功代码的字符串。
    error:是一个方法、请求失败时调用此函数。传入XMLHttpRequest对象。

get

$(document).ready(function(){
    $("#searchBtn").click(function(){
        $.ajax({
            type:"GET",
            url:" https://api.passport.xxx.com/checkNickname?username="+mylogin.username+"&token="+mylogin.token+"&nickname="+nickname+"&format=jsonp&cb=?",
            dataType:"json",
            success:function(data){
                if(data.errorCode==0){
                                         $("#nickname").val(mylogin.nickname);                             
                                 }else{
                                         $("#nickname").val("用户");                         
                                 }
            },
            error:function(jqXHR){
                console.log("Error: "+jqXHR.status);
            }
        });
    });
});

post

function dologin(qrid,username,token){
    $.ajax({
        url:"http://api.passport.pptv.com/v3/login/qrcode.do",
        type:"post",
        dataType:"jsonp",
        data:{from:"clt",qrid:qrid,username:username,token:token},
        success:function(data){
             try {
                    var p = external.GetObject('@xxx.com/passport;1');
                    p.On3rdLogin2(0,0,data,true);
                } catch (e) {
                    return false;
                }
                setTimeout(function () {
                    try {
                        var wb = external.Get('Signin2Window');
                        wb.OnClose();
                    } catch (e) {
                    }
                }, 200);
        }
    });
}

jQuery中常用的函数方法

初始化函数

$(document).ready(function(){

});
作用：它可以极大地提高web应用程序的响应速度。通过使用这个方法，可以在DOM载入就绪能够读取并操纵时立即调用你所绑定的函数，而99.99%的JavaScript函数都需要在那一刻执行.

$("p").bind("click", function(){
alert( $(this).text() );
});
作用：为每一个匹配元素的特定事件（像click）绑定一个事件处理器函数。起到事件监听的作用。

$("td").toggle(
function () {
$(this).addClass("selected");
},
function () {
$(this).removeClass("selected");
}
);

作用：每次点击时切换要调用的函数。如果点击了一个匹配的元素，则触发指定的第一个函数，当再次点击同一元素时，则触发指定的第二个函数。挺有趣的一个函数，在动态实现某些功能的时候可能会用到。

addClass(class)和removeClass(class)

代码：
$(".stripe tr").mouseover(function(){
$(this).addClass("over");}).mouseout(function(){
$(this).removeClass("over");})
});
也可以写成：
$(".stripe tr").mouseover(function() { $(this).addClass("over") });
$(".stripe tr").mouseout(function() { $(this).removeClass("over") });

作用：为指定的元素添加或移除样式，从而实现动态的样式效果，上面的实例中实现鼠标移动双色表格的代码。

css(name,value)

代码：
$("p").css("color","red");
作用：很简单，就是在匹配的元素中，设置一个样式属性的值。这个个人感觉和上面的addClass(class)有点类似。

还有很多，就不一一列举了。。。

鼠标事件    键盘事件    表单事件    文档/窗口事件
click        keypress    submit        load
dblclick    keydown    change        resize
mouseenter    keyup        focus        scroll
mouseleave            blur        unload
hover

jQuery 选择器简介

jQuery 选择器允许对 HTML 元素组或单个元素进行操作。

jQuery 选择器基于元素的 id、类、类型、属性、属性值等"查找"（或选择）HTML 元素。它基于已经存在的 CSS 选择器，除此之外，它还有一些自定义的选择器。

jQuery 中所有选择器都以美元符号开头：$()。

1 .基本选择器

$("#test") 选择id值为test的元素，id值是唯一的所以返回单个元素。

$("div") 选择所有的div标签元素，返回div元素数组

$(".myclass") 选择使用myclass类的css的所有元素

$("*") 选取所有元素。

$("#test,div,.myclass") 选取多个元素。

2.层次选择器
复制代码

$("div span") 选取<div>里的所有<span>元素

$("div >span") 选取<div>元素下元素名是<span>的子元素

$("#one +div") 选取id为one的元素的下一个<div>同辈元素等同于$("#one").next("div")

$("#one~div") 选取id为one的元素的元素后面的所有<div>同辈元素等同于$("#one").nextAll("div")

$("#one").siblings("div") 获取id为one的元素的所有<div>同辈元素（不管前后）

$("#one").prev("div") 获取id为one的元素的前面紧邻的同辈<div>元素

所以获取元素范围大小顺序依次为：

$("#one").siblings("div")>$("#one~div")>$("#one +div") 或是

$("#one").siblings("div")>$("#one").nextAll("div")>$("#one").next("div")

3.基本过滤选择器

$("div:first") 选取所有<div>元素中第1个<div>元素

$("div:last") 选取所有<div>元素中最后一个<div>元素

$("input:not(.myClass)") 选取class不是myClass的<input>元素

$("input:even") 选取索引是偶数的<input>元素(索引从0开始)

$("input:odd") 选取索引是基数的<input>元素(索引从0开始)

$("input:eq(2)") 选取索引等于2的<input>元素

$("input:gt(4)") 选取索引大于4的<input>元素

$("input:lt(4)") 选取索引小于4的<input>元素

$(":header") 过滤掉所有标题元素，例如：h1、h2、h3等

$("div:animated") 选取正在执行动画的<div>元素

$(":focus") 选取当前获取焦点的元素

4.内容过滤选择器

$("div:contains('Name')") 选取所有<div>中含有'Name'文本的元素

$("div:empty") 选取不包含子元素（包括文本元素）的<div>空元素

$("div:has(p)") 选取所有含有<p>元素的<div>元素

$("div:parent") 选取拥有子元素的（包括文本元素）<div>元素

5.可见性过滤选择器

$("div:hidden") 选取所有不可见的<div>元素

$("div:visible") 选取所有可见的<div>元素

6.属性过滤选择器

$("div[id]") 选取所有拥有属性id的元素

$("input[name='test']") 选取所有的name属性等于'test'的<input>元素

$("input[name!='test']") 选取所有的name属性不等于'test'的<input>元素

$("input[name^='news']") 选取所有的name属性以'news'开头的<input>元素

$("input[name$='news']") 选取所有的name属性以'news'结尾的<input>元素

$("input[name*='news']") 选取所有的name属性包含'news'的<input>元素

$("div[title|='en']") 选取属性title等于'en'或以'en'为前缀(该字符串后跟一个连字符'-')的<div>元素

$("div[title~='en']") 选取属性title用空格分隔的值中包含字符en的<div>元素

$("div[id][title$='test']") 选取拥有属性id,并且属性title以'test'结束的<div>元素

7.子元素过滤选择器

$("div .one:nth-child(2)") 选取class为'one'的<div>父元素下的第2个子元素

$("div span:first-child") 选取每个<div>中的第1个<span>元素

$("div span:last-child") 选取每个<div>中的最后一个<span>元素

$("div button:only-child") 在<div>中选取是唯一子元素的<button>元素

8.表单对象属性过滤选择器

$("#form1 :enabled") 选取id为'form1'的表单内所有可用元素

$("#form2 :disabled") 选取id为'form2'的表单内所有不可用元素

$("input :checked") 选取所有被选中的<input>元素

$("select option:selected") 选取所有的select 的子元素中被选中的元素

9.表单选择器

$(":input") 选取所有<input>,<textarea>,<select> 和 <button>元素

$(":text") 选取所有的单行文本框

$(":password") 选取所有的密码框

$(":radio") 选取所有单的选框

$(":checkbox") 选取所有的多选框

$(":submit") 选取所有的提交按钮

$(":image") 选取所有的图像按钮

$(":reset") 选取所有的重置按钮

$(":button") 选取所有的按钮

$(":file") 选取所有的上传域

$(":hidden") 选取所有不可见元素

jeffrey_ding

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
js、jquery中的get post ajax汇总

get和post的区别1.安全性：get是通过http协议的header发送请求，所以会将参数拼接在地址栏中，所以安全性很差；post是通过http协议的body发送请求，地址栏中并不会出现，所以相对安全；还有一点，用get方法发送请求会被客户端浏览器缓存，通过查看历史记录可以查看到用户信息，所以非常不安全。2.传送大小：get只能传送2kb，而post一般不受限制3.效率：get效率高，...
复制链接

扫一扫