zoukankan      html  css  js  c++  java
  • JQUREY 的 表单序列化 和 .$.getScript () 和 $.getJSON() 方法!

    传统的表单操作是每个表单元素一个一个获取值进行提交,这样效率比较低

    所以我们有了 表单序列化方法: serialize() 他会智能获取表单内的所有元素,会将

    里面的内容序列化到字符串中,然后在用AJAX提交。

    简单点说:- 方法用于序列化一组表单元素,将表单的内容编码为用于提交的字符串

    例:

    <body>
        <!-- 此代码已导入JQ !!! 切记!       -->
        
        <form id = "myform">
        昵称<input type="text" name = "username" value="admin">    <br>
        密码<input type="password" name= "passowrd" value = "admin"><br>
        <input type="button" id = "submit" value = "序列化表单【提交】">
        </form>
        
        <script type="text/javascript">
            $('#submit').click(function() {
                alert( $('#myform').serialize() );
            });
        </script>
    </body>

    打印出来的就是 要提交的内个Get的那个数据: username=admin&passowrd=admin

    非常的方便啊,所以我们举一反三:

    我们可以在AJAX的data哪里 直接 序列化提交,具体自己去实现啊啊哈哈~~~~

    还可以获取单选框 和 复选框 和 下拉框的内容:

    <body>
        <!-- 此代码已导入JQ !!! 切记!       -->
        
        <form id = "myform" >
        你喜欢游泳吗?
        <input type="radio" name = "Swimming" value = "喜欢" checked="checked"> 喜欢&nbsp;&nbsp;
        <input type="radio" name = "Swimming" value = "不喜欢"> 不喜欢&nbsp;&nbsp;
        <input type="radio" name = "Swimming" value = "还好"> 还好&nbsp;&nbsp;
            <br>
        你喜欢什么运动?
        <input type="checkbox" name = "hobby1" value = "跑步" > 跑步&nbsp;&nbsp;
        <input type="checkbox" name = "hobby2" value = "跆拳道"> 跆拳道&nbsp;&nbsp;
        <input type="checkbox" name = "hobby3" value = "登高"> 登高&nbsp;&nbsp;
        <input type="checkbox" name = "hobby4" value = "跳绳"> 跳绳&nbsp;&nbsp;
        <input type="checkbox" name = "hobby5" value = "游泳"> 游泳&nbsp;&nbsp;
        <input type="checkbox" name = "hobby6" value = "羽毛球"> 羽毛球&nbsp;&nbsp;
        
        
        <br>
        <input value="序列化提交" id = "submit" type="button">
        </form>
        
        <script type="text/javascript">
            $('#submit').click(function() {
                console.log($('#myform').serialize())
            });
        </script>
    </body>

    我选了几个啊 返回的是:Swimming=%E5%96%9C%E6%AC%A2&hobby1=%E8%B7%91%E6%AD%A5&hobby4=%E8%B7%B3%E7%BB%B3&hobby6=%E7%BE%BD%E6%AF%9B%E7%90%83

    然后我们将其解码:Swimming=喜欢&hobby1=跑步&hobby4=跳绳&hobby6=羽毛球

    也可以用decodeURIComponent()解码...你自己喜欢啦...


     getScript() 方法

    getScript() 方法通过 HTTP GET 请求载入并执行 JavaScript 文件。

    语法

    jQuery.getScript(url,success(response,status))
    参数描述
    url 将要请求的 URL 字符串。
    success(response,status)

    可选。规定请求成功后执行的回调函数。

    额外的参数:

    • response - 包含来自请求的结果数据
    • status - 包含请求的状态("success", "notmodified", "error", "timeout" 或 "parsererror")

    该函数是简写的 Ajax 函数,等价于:

    $.ajax({
      url: url,
      dataType: "script",
      success: success
    });

    注释:jQuery 1.2 版本之前,getScript 只能调用同域 JS 文件1.2中,您可以跨域调用 JavaScript 文件。注意:Safari 2 或更早的版本不能在全局作用域中同步执行脚本。如果通过 getScript 加入脚本,请加入延时函数。

    其实没什么用.........

    例子 1

    加载并执行 test.js:

    $.getScript("test.js");


    他那两个参数 你自己加 ,,一个是返回的结果 一个是请求的状态


    getJSON() 方法

    getJSON() 方法使用 AJAX 的 HTTP GET 请求获取 JSON 数据。

     

     

     

    语法

    $(selector).getJSON(url,data,success(data,status,xhr))

     

    参数描述
    url 必需。规定将请求发送到哪个 URL。
    data 可选。规定发送到服务器的数据。
    success(data,status,xhr) 可选。规定当请求成功时运行的函数。
    额外的参数:
    • data - 包含从服务器返回的数据
    • status - 包含请求的状态("success"、"notmodified"、"error"、"timeout"、"parsererror")
    • xhr - 包含 XMLHttpRequest 对象

    这个url可以是一个文件 .json文件  主要还是success这个方法 返回的东西我们可以运用

    这都不怎么用 JQ 也要被淘汰了  学吧 就算倒闭了我也要学 哎

    本文来自博客园,作者:咸瑜,转载请注明原文链接:https://www.cnblogs.com/bi-hu/p/14843102.html

  • 相关阅读:
    QT VS配置UNICODE问题
    深入理解C++中的mutable关键字
    Qt creator error: LNK1123: 转换到 COFF 期间失败: 文件无效或损坏(vs2010的嵌入式清单文件)
    hdu 3401 Trade 单调队列优化dp
    QT父子与QT对象delete
    QT下的几种透明效果(三种方法:调色板,透明度属性,自绘)
    QT实现鼠标钩子(使用SetWindowsHookEx安装mouseProc函数)
    VirtualBox的网络设置(6种方式)
    8个成功界面的特性
    熬之滴水成石:Spring--精简的J2EE(7)
  • 原文地址:https://www.cnblogs.com/bi-hu/p/14843102.html
Copyright © 2011-2022 走看看