首页 > 其他分享 >jQuery AJAX之异步访问和加载片段

jQuery AJAX之异步访问和加载片段

时间:2023-05-05 21:55:25浏览次数:32  
标签:jQuery 异步 function text AJAX 参数 result data 加载

HTML文件

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="../../Scripts/jquery-3.4.1.min.js"></script>
    <script src="ajaxindex.js"></script>
</head>
<body>
    <input type="text" id="namevalue" />
    <br />
    <button id="btn">Send</button>
    结果:<span id="result"></span>

    <!--加载片段-->
</body>
</html>

JS文件:

$(document).ready(function () {
    $("#btn").on("click", function () {
        $("#result").text("请求数据中,请稍后……");//防止延迟卡顿
        $.get("Server.php", { name: $("#namevalue").val() },function (data) {//参数1:网址,参数2:参数,参数3:返回值
            $("#result").text(data);//Ajax异步请求,只更新结果,不刷新页面
        }).error(function () {
            $("#result").text("通讯失败!");
        });
    });

    $("#btn").on("click", function () {
        $.post("Server.php", { name: $("#namevalue").val() }, function (data) {//参数1:网址,参数2:参数,参数3:返回值
            $("#result").text(data);//Ajax异步请求,只更新结果,不刷新页面
        });
    });

    //加载片段
    $("body").text("wait……");//等待加载
    $("body").load("HtmlPage1.htm", function (a, status, c) {//三个参数
        console.log(status);//观察状态
        if (status == "error") {
            $("body").text("加载失败");
        }
    });

    $.getScript("HelloJS.js").complete(function () {//加载JS文件
        sayHello();
    });
});

HTM文件:

<div style="width:100px;height:100px;background-color:#ff0000"></div>

HelloJS.JS文件:

function sayHello() {
alert("Hello AJAX!");
}

 

标签:jQuery,异步,function,text,AJAX,参数,result,data,加载
From: https://www.cnblogs.com/Mandy-ZQ-Ma/p/17375465.html

相关文章

  • jQuery效果-淡入淡出-滑动-回调
    <!DOCTYPEhtml><htmlxmlns="http://www.w3.org/1999/xhtml"><head><title></title><scriptsrc="../JQuery/jquery-1.8.0.min.js"></script><scriptsrc="JavaScript1.js">......
  • python异步爬虫
    异步爬虫基础知识阻塞​ 阻塞状态指程序未得到所需计算资源时被挂起的状态。程序在等待某个操作完成期间,自身无法继续干别的事情,则该程序在操作上是阻塞的。​ 常见的阻塞形式有:网络I/O阻塞、磁盘I/O阻塞、用户输入阻塞等。阻塞是无处不在的,包括在CPU切换上下文时,所有进程都......
  • Django框架——ajax补充、多对多三种创建、序列化组件、批量操作数据、分页器
    ajax补充说明主要是针对回调函数args接收到的响应数据1.后端request.is_ajax() 用于判断当前请求是否由ajax发出2.后端返回的三板斧都会被args接收不再影响整个浏览器页面3.选择使用ajax做前后端交互的时候后端一般返回的都是字典数据 user_dict={'code':10000,'usernam......
  • Django——基于forms组件和ajax的注册功能
    Django——基于forms组件和ajax的注册功能path('register/',views.register)#注册的form表单fromdjangoimportformsfromdjango.formsimportwidgetsclassRegForm(forms.Form):user=forms.CharField(max_length=32,widget=widgets.TextInput(attrs={'class&......
  • jquery的$()
    jquery的$().each,$.each的区别在jquery中,遍历对象和数组,经常会用到$().each和$.each(),两个方法。两个方法是有区别的,从而这两个方法在针对不同的操作上,显示了各自的特点。$().each,对于这个方法,在dom处理上面用的较多。如果页面有多个input标签类型为checkbox,对于这时用$().eac......
  • jquery获取input输入框中的值
    如何用javascript获取input输入框中的值HTML<inputtype="text"id="CSDN_NAME"name="CSDN_NAME"class="CSDN_NAME">一、jquery方法通过namevarname=$('input[name="CSDN_NAME"]').val();通过**id**varna......
  • JQuery 层级选择器(next(),preAll(),siblings(),parent())
    JQuery层级选择器(next(),preAll(),siblings(),parent()) $('#d1div') //取所有子元素,不管是几层。$('#d1>div') //取直接子元素,一层$('#d1+div') //之后紧邻的一个同级元素$('#d1~div') //之后的所有同级元素$('#d1').next() //后面的一个同级元素$('#d1&......
  • django3.0异步、提高项目并发量
    1补充django3.0#补充:django3.0以后支持异步-ASGI:WSGI是基于HTTP协议模式的,不支持WebSocket(需要其他模块处理,eg:channels)ASGI的诞生则是为了解决Python常用的WSGI,不支持当前Web开发中的一些新的协议标准,例如:websocket,http2的协议,且还支持异步-django......
  • 【动手学深度学习】第十二章笔记:异步计算、数据并行
    为了更好的阅读体验,请点击这里12.1编译器和解释器原书主要关注的是命令式编程(imperativeprogramming)。Python是一种解释性语言,因此没有编译器给代码优化,代码会跑得很慢。12.1.1符号式编程考虑另一种选择符号式编程(symbolicprogramming),即代码通常只在完全定义了过程之后才......
  • Django之ajax
    Django之ajax前后端传输数据的编码格式(理论篇)""" 只研究post请求的编码格式,get不研究 url?username=xxx&password=yyy,这就是get提交的"""form表单能够2种: 1.urlencoded2.form-data#json格式的数据form表单无法提交能够提交json的格式有: 1.ajax2.第三方工......