Ajax

最新推荐文章于 2024-09-16 13:10:48 发布
最新推荐文章于 2024-09-16 13:10:48 发布
阅读量593 收藏
点赞数 1
分类专栏： AJAX 文章标签： ajax jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/winfredzen/article/details/50835603
版权

Ajax

serialize() 方法

serialize() 方法通过序列化表单值，创建 URL 编码文本字符串

如：

<form action="">
  First name: <input type="text" name="FirstName" value="Mickey"><br>
  Last name: <input type="text" name="LastName" value="Mouse"><br>
</form>

<script>
$(document).ready(function(){
    $("button").click(function(){
        $("div").text($("form").serialize());
    });
});
</script>

$("form").serialize()的结果为FirstName=Mickey&LastName=Mouse

可以使用form表单的serialize()，作为ajax请求data的值，如：

            $.ajax({
                url:"${APP_PATH}/emp/" + $(this).attr("edit-id"),
                type:"POST",
                data:$("#empUpdateModel form").serialize() + "&_method=PUT",
                success:function(result){
                    alert(JSON.stringify(result));
                }
            });

基本

ajax返回的数据转为son
参考Using JSON to parse xmlhttp.responseText for populating textboxes

function loadDoc()
{
   var xmlhttp;

   // code for IE7+, Firefox, Chrome, Opera, Safari
   if (window.XMLHttpRequest)
   {
      xmlhttp=new XMLHttpRequest();
   }
   // code for IE6, IE5
   else
   {
      xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
   }

   xmlhttp.onreadystatechange=function()
   {
      if (xmlhttp.readyState==4 && xmlhttp.status==200)
      {
         var a = JSON.parse(xmlhttp.responseText);
         document.getElementById("textbox").value=a.first;
         document.getElementById("textbox2").value=a.second;
      }
   }

   xmlhttp.open("GET","loadTextBox.php?id=4",true);
   xmlhttp.send();
}

或者使用eval("("+req.responseText+")")

在url如果有中文，如何处理？

1.使用escape()
2.使用var url = "search?keyword=" + encodeURI(encodeURI(content.value));

参考:

在java服务端还要这样处理：

    String keyword = request.getParameter("keyword");
    keyword = URLDecoder.decode(keyword, "UTF-8");

jQuery Ajax方法介绍

load()方法

load()方法通过Ajax加载服务器中的数据，并把返回的数据放置到指定的元素中，格式为：load(url,[data],[callback])

  • url - 加载服务器的地址
  • data - 请求发送的数据
  • callback - 回调函数

例子

        <script type="text/javascript">
            $(function () {
                $("#btnShow").bind("click", function () {
                    var $this = $(this);
                    $("ul")
                    .html("<img src='Images/Loading.gif' alt=''/>")
              .load("http://www.imooc.com/data/fruit_part.html",function(){
                        $this.attr("disabled", "true");
                    });
                })
            });
        </script>

getJSON()方法

getJSON()方法异步加载JSON格式数据
格式为jQuery.getJSON(url,[data],[callback])或者$.getJSON(url,[data],[callback])

例子
URLhttp://www.imooc.com/data/sport.json获取的数据为：

[{ 
  "name": "足球"
},{ 
  "name": "散步"
},{ 
  "name": "篮球"
},{ 
  "name": "乒乓球"
},{ 
  "name": "骑自行车"
}]
    <script type="text/javascript">
        $(function () {
            $("#btnShow").bind("click", function () {
                var $this = $(this);
                $.getJSON("http://www.imooc.com/data/sport.json",function(data){
                    $this.attr("disabled", "true");
                    $.each(data, function (index, sport) {
                        if(index==3)
                            $("ul").append("<li>" + sport["name"] + "</li>");
                    });

                });
            })
        });
    </script>

getScript()方法

getScript()方法异步请求并执行服务器中的JavaScript格式的文件
格式为jQuery.getScript(url,[callback])或者$.getScript(url,[callback])

例子
http://www.imooc.com/data/sport_f.js的内容如下：

var data = [{
    "name": "足球"
}, {
    "name": "散步"
}, {
    "name": "篮球"
}, {
    "name": "乒乓球"
}, {
    "name": "骑自行车"
}];
$.each(data, function (index, sport) {
    if (index == 1)
        $("ul").append("<li>" + sport["name"] + "</li>");
});

script代码：

    <script type="text/javascript">
        $(function () {
            $("#btnShow").bind("click", function () {
                var $this = $(this);
                $.getScript("http://www.imooc.com/data/sport_f.js",function(){
                    $this.attr("disabled", "true");
                });
            })
        });
    </script>

get()方法

get()方法采用GET方式向服务器请求数据，并通过方法中回调函数的参数返回请求的数据。
格式为$.get(url,[callback])

例子

        <script type="text/javascript">
            $(function () {
                $("#btnShow").bind("click", function () {
                    var $this = $(this);
                    $.get("http://www.imooc.com/data/info_f.php",function(data) {
                        $this.attr("disabled", "true");
                        $("ul").append("<li>我的名字叫：" + data.name + "</li>");
                        $("ul").append("<li>男朋友对我说：" + data.say + "</li>");
                    }, "json");
                })
            });
        </script>

其中http://www.imooc.com/data/info_f.php返回的数据为：

{"name":"\u767d\u5bcc\u7f8e","say":"\u54b1\u4eec\u7ed3\u5a5a\u5427!"}

post()方法

post()方法以POST方法向服务器发送数据，服务器接收到数据之后，进行处理，并将处理结果返回页面。
调用格式为：$.post(url,[data],[callback])

例子

        <script type="text/javascript">
            $(function () {
                $("#btnCheck").bind("click", function () {
                    $.post("http://www.imooc.com/data/check_f.php",
                    {num:$("#txtNumber").val()},
                    function (data) {
                        $("ul").append("<li>你输入的<b>  "
                        + $("#txtNumber").val() + " </b>是<b> "
                        + data + " </b></li>");
                    });
                })
            });
        </script>

serialize()方法

serialize()方法将表单中有name属性的元素进行序列化，生成标准URL编码文本字符串，可用于ajax请求。
调用格式如下：$(selector).serialize()

例子
form表单

            <form action="">
            <ul>
                <li>姓名：<input name="Text1" type="text" size="12" /></li>
                <li>
                    <select name="Select1">
                        <option value="0">男</option>
                        <option value="1">女</option>
                    </select>
                </li>
                <li><input name="Checkbox1" type="checkbox" />资料是否可见 </li>
                <li id="litest"></li>
            </ul>
            </form>

script代码

        <script type="text/javascript">
            $(function () {
                $("#btnAction").bind("click", function () {
                    $("#litest").text($("form").serialize());
                })
            })
        </script>

效果

ajax()方法

ajax()方法是最底层、功能最强大的请求服务器数据的方法
格式为：jQuery.ajax([settings])或$.ajax([settings])

  • settings - 发送ajax请求时的配置对象，可包括：
    • url 服务器请求的路径
    • data 请求时传递的数据
    • dataType 服务器返回的数据类型
    • success 请求成功的执行的回调函数
    • type 发送数据请求的方式，默认为get

例子

        <script type="text/javascript">
            $(function () {
                $("#btnCheck").bind("click", function () {
                    $.ajax({
                        url:"http://www.imooc.com/data/check.php",
                        data: { num: $("#txtNumber").val() },
                        type:"post",
                        success: function (data) {
                            $("ul").append("<li>你输入的<b>  "
                            + $("#txtNumber").val() + " </b>是<b> "
                            + data + " </b></li>");
                        }
                    });
                })
            });
        </script>

ajaxSetup()方法

ajaxSetup()方法可以设置Ajax请求的一些全局性选项值，设置完成后，后面的Ajax请求将不需要再添加这些选项值
格式为：jQuery.ajaxSetup([options])或$.ajaxSetup([options])

例子

        <script type="text/javascript">
            $(function () {
                $.ajaxSetup({
                type:"post",
                data: { num: $("#txtNumber").val() },
                success:function(data){
                        $("ul").append("<li>你输入的<b>  "
                            + $("#txtNumber").val() + " </b>是<b> "
                            + data + " </b></li>");
                    }
                });
                $("#btnShow_1").bind("click", function () {
                    $.ajax({
                        url: "http://www.imooc.com/data/check.php"
                    });
                })
                $("#btnShow_2").bind("click", function () {
                    $.ajax({ 
                        url: "http://www.imooc.com/data/check_f.php"
                    });
                })
            });
        </script>

ajaxStart()和ajaxStop()方法

ajaxStart()和ajaxStop()方法是绑定Ajax事件。
ajaxStart()方法用于在Ajax请求发出前触发函数
ajaxStop()方法用于在Ajax请求完成后触发函数

格式为：$(selector).ajaxStart(function())和$(selector).ajaxStop(function())

例子

        <script type="text/javascript">
            $(function () {
                $("#divload").ajaxStart(function(){
                    $(this).html("正在请求数据...");
                });
                $("#divload").ajaxStop(function(){
                    $(this).html("数据请求完成！");
                });
                $("#btnShow").bind("click", function () {
                    var $this = $(this);
                    $.ajax({
                        url: "http://www.imooc.com/data/info_f.php",
                        dataType: "json",
                        success: function (data) {
                            $this.attr("disabled", "true");
                        $("ul").append("<li>我的名字叫：" + data.name + "</li>");
                        $("ul").append("<li>男朋友对我说：" + data.say + "</li>");
                        }
                    });
                })
            });
        </script>
winfredzen
关注
专栏目录
ajax
huangyh技术栈
09-28 3万+
1.1 什么是ajax: Ajax即“Asynchronous Javascript And XML”(异步JavaScript 和XML)，是指一种创建交互式网页应用的网页开发技术。Ajax=异步JavaScript和XML（标准通用标记语言的子集）。通过在后台与服务器进行少量数据交换,Ajax可以使用网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新（无刷新...
谷歌浏览器插件—— Ajax Interceptor
03-16
**Ajax Interceptor：深入理解与应用** Ajax Interceptor 是一款专为谷歌浏览器（Chrome）设计的插件，它允许开发者在Ajax请求发送后和响应返回前进行干预，从而实现对AJAX请求数据的修改。这款插件对于前端开发、...
ajax请求url 绝对路径与相对路径
weixin_33827731的博客
03-08 1607
2019独角兽企业重金招聘Python工程师标准>>> ...
看这一篇就够了！-Ajax详解
Oriental_的博客
03-15 17万+
今天来聊一聊前后端交互的重要工具Ajax 结合上次跟大家分享的前后端交互基础，如果还没有看过的童鞋，以下是传送门 前后端交互详解 AJAX - 到底什么是Ajax? ajax 全名 async javascript and XML 是前后台交互的能⼒ 也就是我们`客户端给服务端发送消息的⼯具，以及接受响应的⼯具 是⼀个 默认异步执⾏机制的功能AJAX分为同步（async = false...
AJAX 详解
06-19 2万+
Ajax基础知识，及常见问题详解
Ajax请求的五个步骤
热门推荐
chaopingyao的博客
06-02 17万+
Ajax请求的五个步骤 一、定义 1、什么是Ajax Ajax：即异步 JavaScript 和XML。Ajax是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换，Ajax可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。而传统的网页(不使用 Ajax)如果需要更新内容，必需重载整个网页面。 2、同步与异步的区别 同步提交：当用户发送请求时，当前页面不可以使用，服务器响应页面到客户端，响应完成，用户才可以使用页面。 异步提交：当用户发送请
AJAX简介
xpmhhh的博客
03-20 6875
AJAX: 全称Asynchronous JavaScript And XML，即异步JS和XML。 通过AJAX可以在浏览器中向服务器发送异步请求。 最大的优势：无刷新的获取数据。 Ajax不是新的编程语言，而是一种将现有的标准组合在一起使用的新方式。 XML: 可扩展标记语言，被设计用来传输和存储数据。 与HTML的区别：HTML中都是预定义的标签，而XML中没有预定义标签，全都是自定义标签，用来表示一些数据。 以前Ajax是用XML格式的字符串进行数据交换，现在已经被JSON取代了。
Ajax请求
weixin_45030426的博客
03-25 1万+
ajax请求简介： ajax是利用前端的技术，向服务器发送一个异步请求 原有的请求在请求后需要刷新整张页面，
AJAX
风间琉璃の博客
08-04 4050
AJAX AJAX 不是一种新的编程语言而是一种使用现有标准的新方法，与服务器交换数据并更新部分网页的新技术（不用重新加载整个界面）。 AJAX = 异步JavaScript和xml。 1.创建AJAX对象 XMLHttpRequest 对象用于在后台与服务器交换数据 var xhr = new XMLHttpRequest(); 老版本的ie var xhr = new ActiveXObj...
Ajax从入门到精通.pdf
05-09
Ajax从入门到精通.pdf 本书籍旨在深入浅出地介绍 Ajax 技术，从基础知识到高级应用，全面覆盖 Ajax 的核心概念、技术原理、实现方法和实践应用。书籍的主要内容包括： 1. Ajax 概述：本书首先介绍了 Ajax 的概念、...
chrome扩展插件获取ajax请求记录
04-06
在IT领域，尤其是在Web开发中，Ajax（Asynchronous JavaScript and XML）是一种常用的技术，它使得网页可以在不重新加载整个页面的情况下与服务器交换数据并更新部分网页内容。这极大地提升了用户体验，因为用户不再...
Ajax实现文件下载
12-11
JQuery的ajax函数的返回类型只有xml、text、json、html等类型，没有“流”类型，所以我们要实现ajax下载，不能够使用相应的ajax函数进行文件下载。但可以用js生成一个form，用这个form提交参数，并返回“流”类型的...
C# 如何使用ajax请求
08-18
C# 如何使用ajax请求 C# 使用ajax请求是指在C# 项目中使用ajax技术来实现异步更新网页的内容。ajax即“Asynchronous Javascript And XML”（异步JavaScript 和 XML），是指一种创建交互式、快速动态网页应用的网页...
实现实时Web应用，使用AJAX轮询、WebSocket、还是SSE呢？？
Hassan的小博客!
09-12 859
文章目录短轮询（Short Polling）长轮询（Long Polling）Comet “服务器推” （这玩意现在用的很少了，了解一下即可）WebSocket原理：方法：事件：SSE原理事件总结 在日常的开发中，我们经常能碰见服务端需要主动推送给客户端数据的业务场景，比如数据大屏的实时数据、新闻数据、消息中心的未读消息，聊天功能、股票走势、天气情况等等。 我们的方案大概就是轮询、WebSocket、SSE 短轮询（Short Polling） 客户端定期（例如每几秒）发送AJAX请求到服务器。服务器立
Day01_Ajax入门
闲杂人
09-12 766
请求方法是一些固定单词的英文，例如：GET，POST，PUT，DELETE，PATCH（这些都是http协议规定的），每个单词对应一种对服务器资源要执行的操作。浏览器网页中，使用 AJAX技术（XHR对象）发起获取省份列表数据的请求，服务器代码响应准备好的省份列表数据给前端，前端拿到数据数组以后，展示到网页。统一资源定位符，简称网址，用于定位网络中的资源（资源指的是：网页，图片，数据，视频，音频等等）标记服务器在互联网当中的方位，网络中有很多服务器，你想访问哪一台，就需要知道它的域名才可以。
AJAX 入门 day3
2301_77358195的博客
09-16 627
学习之前先了解一下ajax和axios之间的区别：是一种允许网页在后台与服务器进行数据交换的技术，而不需要重新加载整个页面。它不是一种特定的库或框架，而是一种实现异步数据传输的通用方法。，它适用于浏览器和 node.js。（在浏览器中）或 node.js 的原生 HTTP 模块，但它抽象了它们的复杂性，使得发送请求更加容易。在现代前端开发中，Axios 被广泛推荐用来发起 HTTP 请求，因为它简单易用，并且容易集成到常见的进程式任务中，如 React、Vue 或 Angular 应用。
长春人文学院在河北2021-2024各专业最低录取分数及位次表.pdf
最新发布
09-16
全国各大学在河北2021-2024年各专业最低录取分数及录取位次数据，高考志愿必备参考数据
CPA《公司战略与风险管理》张英奎 基础班 第1章 战略管理中的权力与利益相关者2.pdf
09-16
CPA《公司战略与风险管理》张英奎 基础班 第1章 战略管理中的权力与利益相关者2.pdf
Ajax到JQuery Ajax学习指南
"这篇教程主要关注的是从基本的Ajax技术过渡到使用JQuery的Ajax功能的学习。Ajax（Asynchronous JavaScript and XML）是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。它通过在后台与服务器交换数据...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值