Ajax day03

发布于 19 天前  8 次阅读


1.复习内容

  • JQuery节点操作

    • jq中很多方法可以使用选择器来选择
    • 1.创建节点:

      • 直接用$(‘’)包裹字符串
    • 2.追加节点

      • 旧节点.append(新节点) 新节点追加到旧内部结尾
      • 新节点.appendTo(旧节点) 新节点追加到旧内部结尾
      • 旧节点.prepend(新节点) 新节点追加在旧节点内部开头
      • 新节点.prependTo(旧节点) 新节点追加在旧节点内部开头
      • after() 在选择元素后插入兄弟标签
      • 新节点.insertAfter(旧节点)
      • before 在选择元素之前插入兄弟标签
      • 新节点.insertAfter(旧节点)
    • 3.设置节点属性

      • attr() 多个值用字典
      • prop() 读取或设置元素的状态使用prop
    • 4.移除属性

      • removeProp()
      • removeAttr()
    • 5.设置标签值

      • html() innerHTML
      • text() innetText
      • val() from的value值
    • 6.移除节点操作

      • jq.remove() 删除所有匹配元素,可以带选择器
      • jq.detach() 删除索引匹配元素
      • jq.empty() 删除匹配集合中所有节点
    • 7.替换节点

      • 旧节点.replaceWith(新节点)
      • 新节点.replaceAll(旧节点)
    • 8.包裹节点

      • wrap()
        • $(“span”).wrap(“\

          \

          ”) 把所有匹配元素用其他元素包裹起来

      • unwrap()
        • 不用传参数,把所有匹配元素父节点去掉
      • wrapAll()
        • 将所有匹配的元素用单个元素包裹起来
    • 9.jquery遍历

      • 父子关系

        • children()
        • parent()
      • 祖先节点

        • parents()
        • closest()
      • 兄弟节点

        • prev()
        • prevAll()
        • next()
        • nextAll()
        • siblings()
    • 详细资料:https://www.jianshu.com/p/e31a34f758a3
  • JS节点操作

    • createElement()
    • createTextNode()
    • appendChild()
    • getElementById()
    • removeChild()
    • remove()
    • repleacChild()

2.灵感代办

  • 复习jq和jq的属性方法

3.学习内容

  • Json

    • 1.前端传递JSON到后端

      • 1.前端:将数据封装成对象或者数组

      • param = {
          uname:"wangxx",
          uage:30,
          ugender:"male"
        }

      • 2.前端:将JS对象转换成JSON格式的字符串

        • 方法:json.stringify(param)
      • 3.服务端接收字符串,然后进行处理

        • 方法:json.loads()
        • 注意和JQ的ajax方法做区分
  • JQ使用AXAJ

    • 1.$obj.load(url,data,callback)

      • 作用:载入远程的HTML文件到指定元素中
      • 使用:自己的网页想要嵌入别人的网页使用
      • 语法:
        • $obj.load(url,data,callback)

          • obj:是一个jq对象(远程html展示的地方)
          • url:是服务器地址
          • data:请求参数,可以为空
            • 方式1:字符串传参
              • “key=value&key2=value2” 不需要起名字
              • 使用GET方式发送请求
            • 方式2:使用js对象传参
              • {key:”value”,key2:”value2”}
              • 使用POST发送请求
          • callback:响应成功之后的回调函数(可以为空)
    • 2.$.get(url,data,callback,type)

      • 作用:通过get方法异步发送请求

      • url:请求地址

      • data:是参数(字符串或者js对象)
      • callback:响应成功的回调函数 有一个参数
      • type:响应回来的数据格式(要么json,要么不用)
        1. html:html文本
        2. text:普通文本
        3. script:响应回来的js执行脚本(不常用)
        4. json:json数据(推荐)
    • 3.$.post()

      • 同$.get()方法一样
      • 需要token验证
    • 4.$.ajax({AJAX的参数对象})

      • #### AJAX的对象的参数(传递的要是一个对象)
        • 1.url:异步请求地址
        • 2.data:请求到服务器的参数
          • 字符串和JS对象
        • 3.type:请求方式
          • get和post
        • 4.dataType:服务器端响应回来数据的格式
        • 5.async:是否异步请求
        • 6.success:响应成功回调的函数,有一个参数是响应回来的数据
        • 7.error:请求或者响应失败时候的回调函数
        • 要注意dataType参数大小写
  • 跨域 Cross Domain

    • 1.什么是跨域

      • HTTP协议中的一个策略 - “同源策略”
      • 同源:多个地址中(url),相同协议(http,https等等),相同域名,相同端口的地址称为同源地址
      • 同源地址才能发送AJAX请求
      • 两个标签不被同源限制 (script img)
    • 2.什么时候使用跨域

      • 使用第三方API,比如天气预报
      • 分担服务器压力,架设在多个服务器上
    • 3.使用方法

      • 1.script方式跨域

        • 动态的创建一个script节点,加载远程js文件,需要远程文件内容符合js语法,否则会报js语法错误
        • 推荐:在html中写好js函数,服务器返回js语句调用js函数(可以将函数名传递给服务器)

4.扩展延伸知识

  • json规定要用

    • 要用双引号
  • jq.get()方法如何解析参数

  • python json中的dumps和loads等参数

  • django中queryset和querydict

    • queryset是数据库查询戳来的
    • querydict是post和get方法获取
  • Jquery 的循环操作

    • jq.each(function(i,obj){})
    • i是循环数,obj是每个对象
  • 网络回环地址

    • localhost和127.0.0.1
  • Javascript中script标签中创建script标签

    • 需要转义\<script><\/script>

5.知识内容个人梳理

6.今天都复习了之前的什么内容


Ares个人进阶之路