jQuery的AJax异步訪问

用一个样例用以说明:点击button,将input内用户输入的数据发送给服务端。并将结果返回给页面。

首先是html承载内容:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>AJax异步訪问</title>
    <script src="js/jquery-2.1.3.min.js"></script>
    <script src="js/ajaxDemo.js"></script>
</head>
<body>
<input type="text" id="nameValue">
<br/>
<button id="btn">提交</button>
<p>
    结果:<span id="result"></span>
</p>
</body>
</html>

配置server:Server.php

<?

php
if(isset($_GET[‘name‘])){
    echo "姓名:".$_GET[‘name‘];
}else{
    echo "參数错误";
}

ajaxDemo.js实现AJax异步訪问:

$(document).ready(function(){
    $("#btn").on("click",function(){
        //在与server通讯较慢时给用户提示信息
        $("#result").text("数据请求中,请稍后...");
        //向server发送请求(get、post)
        $.get("Server.php",{name:$("#nameValue").val()},function(data){
            $("#result").text(data);
        }).error(function(){
            //当server出现异常时
            $("#result").text("server正在维护")
        })
    })
})

时间: 2024-10-20 08:47:06

jQuery的AJax异步訪问的相关文章

触碰jQuery:AJAX异步详解

触碰jQuery:AJAX异步详解 传送门:异步编程系列目录…… 示例源码:触碰jQuery:AJAX异步详解.rar AJAX 全称 Asynchronous JavaScript and XML(异步的 JavaScript 和 XML).它并非一种新的技术,而是以下几种原有技术的结合体. 1)   使用CSS和XHTML来表示. 2)   使用DOM模型来交互和动态显示. 3)   使用XMLHttpRequest来和服务器进行异步通信. 4)   使用javascript来绑定和调用.

触碰jQuery:AJAX异步详解(转)

AJAX 全称 Asynchronous JavaScript and XML(异步的 JavaScript 和 XML).它并非一种新的技术,而是以下几种原有技术的结合体. 1)   使用CSS和XHTML来表示. 2)   使用DOM模型来交互和动态显示. 3)   使用XMLHttpRequest来和服务器进行异步通信. 4)   使用javascript来绑定和调用. 通过AJAX异步技术,可以在客户端脚本与web服务器交互数据的过程中使用XMLHttpRequest对象来完成HTTP请

通过jquery的ajax异步请求接收返回json数据

jquery的ajax异步请求接收返回json数据方法设置简单,一个是服务器处理程序是返回json数据,另一种就是ajax发送设置的datatype设置为jsonp格式数据或json格式都可以. 代码示例如下: $('#send').click(function () { $.ajax({ type : "GET", url : "a.php", dataType : "jsonp", success : function (data) { $.

利用jQuery发送ajax异步请求

//很少接触JQuery的Ajax请求 就想着记录一下 到时候有用 $('form').submit(function (e) { // 阻止表单默认提交 e.preventDefault(); var name = $('#name').val(); var password = $('#password').val(); var data = JSON.stringify({"name": name, "password": password}); // 异步发

Thinkphp,Jquery,Ajax异步发布

1.在提交表单的HTML页面的<head>中定义一个变量供Jquery使用 <script type='text/javascript'>var handleUrl='<{:U("Index/Index/handle","","")}>';</script>创 建一个handleUrl变量供index.js(这个是引入的Jquery文件)使用:因为引用的js文件中无法使用模版语法<{}>

jQuery的AJax异步加载片段

主要用到load()方法以及getScript()方法,具体以一个例子说明: 在现有html文件中加载一个拟好的片段,以及在片段加载完成之前阻止用户进一步操作的弹出框. 首先是现有html代码,无任何内容: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>AJax异步加载</title> <scri

jQuery的AJax异步访问

用一个例子用以说明:点击按钮,将input内用户输入的数据发送给服务端,并将结果返回给页面. 首先是html承载内容: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>AJax异步访问</title> <script src="js/jquery-2.1.3.min.js">

JQuery 之 Ajax 异步和同步浅谈

Ajax 同步和异步的区别 同步是当 JS 代码加载到当前 Ajax 的时候会把页面里所有的代码停止加载,页面出现假死状态:当这个 Ajax 执行完毕后才会继续运行其他代码此时页面假死状态才会解除.反之异步则 Ajax 代码在运行时,其余的 JS 脚本依旧能够运行. 在 Jquery 中可以通过 async 的 true 和 false 设置同步或异步,在默认的情况下是为 true 即为异步. 接下来请看下 Sample Code: $.ajax({ type: "post", url

Jquery中Ajax异步请求中的async参数的作用

之前不知道这个参数的作用,上网找了前辈的博客,在此收录到自己的博客,希望能帮到更多的朋友: test.html <a href="javascript:void(0)" onmouseover="testAsync()"> asy.js function testAsync{ var temp;     $.ajax({         async: false,         type : "GET",         url :