zoukankan      html  css  js  c++  java
  • 使用jQuery实现Ajax

    jQuery对Ajax操作进行了封装,在jQuery中最底层的方法是$.ajax(),

    第二层是load(),  $.get(),  $.post()

    第三层是$.getScript(),   $.getJSON()

    1. load方法可以用于html文档的元素节点,把结果直接加为对应节点的子元素,通常而言,load

    方法加载后的数据是一个html片段

    var $obj = ...

    var url = ...

    var args = {key:value,...}

    $obj.load(url,args);

    2. $.get, $.post,    $.getJSON :更加灵活,除去load方法的情况,大部分时候使用的这三个方法,

    1>基本使用

    url:Ajax 请求的目标URL

    args: 传递的参数: JSON类型

    data: Ajax 响应成功后的数据,可能是XML,HTML,JSON

    $.get(url,args,function(data)){

    })

    2>请求JSON数据

    $.get(url, args, function(data){

    },"JSON")

    $.post(url, args, function(data){

     

    },"JSON")

    $.getJSON(url, args, function(){

    })

    testload.jsp

    <%@ page language="java" contentType="text/html; charset=utf-8"
        pageEncoding="utf-8"%>
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Insert title here</title>
    </head>
    <!-- <script type="text/javascript" src="js/jquery-1.12.3.js"></script> -->
    <script type="text/javascript" src="js/jquery-1.12.3.js"></script>
    <!-- <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.js"></script> -->
    <script type="text/javascript">
        $(function() {
            $("a").click(function() {
                alert("1");
                //load 方法处理ajax
                var url = this.href;//this为dom元素
                var args = {
                    "time":new Date()
                };//参数为json格式
                
                //load方法时jQuery中最常用的Ajax方法,
                //任何一个html节点都可以使用load方法加载Ajax,结果将直接插入到html节点中
                //能载入远程的HTML代码并插入到dom中,
                $("#content").load(url,args)
                return false;
            });
        });
    </script>
    <body>
        <a href="helloAjax.txt"> hello Ajax</a>
        <div id="content"></div>
    </body>
    </html>
    All that work will definitely pay off
  • 相关阅读:
    <记录> axios 模拟表单提交数据
    PHP 设计模式(一)
    CSS3中translate、transform和translation的区别和联系
    微信小程序 支付功能 服务器端(TP5.1)实现
    微信小程序 用户登录 服务器端(TP5.1)实现
    <记录> curl 封装函数
    <记录>TP5 关联模型使用(嵌套关联、动态排序以及隐藏字段)
    PHP/TP5 接口设计中异常处理
    TP5 自定义验证器
    高并发和大流量解决方案--数据库缓存
  • 原文地址:https://www.cnblogs.com/afangfang/p/12704492.html
Copyright © 2011-2022 走看看