jQuery | Ajax

最新推荐文章于 2024-05-16 02:23:50 发布
最新推荐文章于 2024-05-16 02:23:50 发布
阅读量171 收藏 2
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_41593408/article/details/87887947
版权
load() 方法从服务器加载数据，并把返回的数据放入被选元素中

index.txt

<h1>我是帥哥,你已成功使用Ajax</h1>

index.html

<script>
    $(document).ready(function () {
       $('button').click(()=>{
           $('p').load('index.txt');
       });
    });
</script>
</head>

<body>
    <p></p>
    <button>使用Ajax</button>
</body>

在这里插入图片描述

回调函数参数:

  • responseTxt - 包含调用成功时的结果内容
  • statusTXT - 包含调用的状态
  • xhr - 包含 XMLHttpRequest 对象
$(document).ready(function () {
       $('button').click(()=>{
           $('p').load('index.txt',(responseTxt,statusTxt,xhr)=>{
                console.log('结果内容:',responseTxt);
                console.log('状态:',statusTxt);
                console.log('包含 XMLHttpRequest 对象:',xhr);
           });
       });
    });

在这里插入图片描述

例子二：
index.php

<?php
$arrayName = array(
	//urlencode()函数原理就是首先把中文字符转换为十六进制，然后在每个字符前面加一个标识符%。
	//urldecode()函数是用于解码已编码的URL字符串，其原理就是把十六进制字符串转换为中文字符
	'name' => urlencode('小陈') ,
	'age' => 20 ,
	'gender' => urlencode('男'));

print_r(urldecode(json_encode($arrayName)));

$(document).ready(function () {
        $('button').click(() => {
            $('p').load('index.php', (responseTxt, statusTxt, xhr) => {
                let Sjson = JSON.parse(responseTxt);
                console.log(Sjson);
                console.log('结果内容:', Sjson.name);
                console.log('状态:', statusTxt);
                console.log('包含 XMLHttpRequest 对象:', xhr);
            });
        });
    });

在这里插入图片描述

GET & POST

get:

index.html

$(document).ready(function () {
        $('button').click(() => {
            $.get("index.php?action=1", (responseTxt, statusTxt, xhr) => {
                let Sjson = JSON.parse(responseTxt);
                console.log(Sjson);
                console.log('状态:', statusTxt);
                console.log('包含 XMLHttpRequest 对象:', xhr);
            });
        });
    });

pdo.inc.php

<?php
$_dbms='mysql';     //数据库类型
$_host='localhost'; //数据库主机名
$_dbName='test';    //使用的数据库
$_user='root';      //数据库连接用户名
$_pass='123456';          //对应的密码
$_dsn="$_dbms:host=$_host;dbname=$_dbName";

index.php

<?php
header('Content-Type:text/html;charset=utf-8');
require('pdo.inc.php');
//连接
try {
    $dbh = new PDO($_dsn, $_user, $_pass , array(PDO::ATTR_PERSISTENT => true)); //初始化一个PDO对象
} catch (PDOException $e) {
    die ("Error!: " . $e->getMessage() . "<br/>");
}

if($_GET['action'] == '1'){
    // 操作
    try {
        $sql = 'SELECT * FROM salarychange';
        $stmt  = $dbh->prepare($sql);
        $stmt->execute();
        $result  = $stmt->fetchAll();
        print_r(json_encode($result));
        return json_encode($result);
    } catch (PDOException $e) {
        print $e->getMessage();
    }
}

在这里插入图片描述

POST:

index.html

$(document).ready(function () {
        $('button').click(() => {
            $.post("index.php", {
                    email: 'admin@qq.com'
                },
                (data, status) => {
                    let Sjson = JSON.parse(data);
                    console.log(Sjson);
                    console.log('POST状态:', status);
                });
        });
    });

index.php

<?php
header('Content-Type:text/html;charset=utf-8');
require('pdo.inc.php');
//连接
try {
    $dbh = new PDO($_dsn, $_user, $_pass , array(PDO::ATTR_PERSISTENT => true)); //初始化一个PDO对象
} catch (PDOException $e) {
    die ("Error!: " . $e->getMessage() . "<br/>");
}

//if($_GET['action'] == '1'){
//     // 操作
//     try {
//         $sql = 'SELECT * FROM salarychange';
//         $stmt  = $dbh->prepare($sql);
//         $stmt->execute();
//         $result  = $stmt->fetchAll();
//         print_r(json_encode($result));
//         return json_encode($result);
//     } catch (PDOException $e) {
//         print $e->getMessage();
//     }
// }

if($_POST['email']){
    // 操作
    try {
        $sql = 'SELECT * FROM user WHERE email = ?' ;
        $stmt  = $dbh->prepare($sql);
        $stmt->execute(array($_POST['email']));
        $result  = $stmt->fetchAll();
        print_r(json_encode($result));
        return json_encode($result);
    } catch (PDOException $e) {
        print $e->getMessage();
    }
}

在这里插入图片描述

Zero Ice
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jQuery-Ajax 详解
m0_48982503的博客
12-14 1万+
一、什么是Ajax Ajax的全称是Asynchronous JavaScript And XML（异步JavaScript和XML）我们可以理解为：在网页中利用XMLHttpRequest对象和服务器进行数据交互的方式就是Ajax，它可以帮助我们轻松实现网页与服务器之间的数据交互。 二，jQuery中的Ajax 在jQuery中，$.Ajax()方法属于最底层的方法，第2层是load()，$.get()，和$.post()，第3层是$.getScript()和$.getJSON()方法。 ...
jQuery Ajax 详细通俗讲解
lucien_ma的博客
08-25 2万+
jQuery Ajax Ajax 是一种异步、无刷新(或者说局部页面刷新)技术。 同步： 现在的大部分请求都是基于同步，所谓同步就是说必须等待请求之后给我返回结果了我才能继续往下操作。好比你要烧水，切菜，做饭。现在是同步，你必须等水烧开再去干其他事情。 异步： 异步就是，请求发送之后，不管你是否返回结果，我继续往下操作。比如，你烧水的同时，不管水烧没烧开，你继续你其他的工作，去切菜。 刷新： 类似我们的 <a></a>标签的点击链接，以及表单元素的提交，都会刷新页面
【速成之路】网页编程必会的Ajax——jQuery实现Ajax（一）
最新发布
2401_84093443的博客
05-16 721
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！
JQuery发送Ajax请求的5种简单使用方式，一看就会~
冷芝士鸭的学习笔记
10-19 9331
JQuery发送Ajax请求的5种简单使用方式，一看就会~ 1、Ajax简介 1.1 什么是Ajax Ajax即Asynchronous Javascript And XML（异步JavaScript和XML），在 2005年被Jesse James Garrett提出的新术语，用来描述一种使用现有技术集合的新方法，包括: HTML 或 XHTML, CSS, JavaScript, DOM, XML, XSLT, 以及最重要的XMLHttpRequest。使用Ajax技术网页应用能够快速地将增量更新呈现在
jquery的函数实现Ajax
兮遥
08-21 1080
1、$.ajax() $.ajax() 是 jQuery 中 AJAX 请求的核心方法，所有的其他方法都是在内部使用此方法。 语法： $.ajax( { name:value, name:value, ... } ) async ： 布尔值，表示请求是否异步处理。默认是 true (可以不写) contentType ：发送数据到服务器时所使用的内容类型。默认是"application/x-www-form-urlencoded"。 data：规定要发送到服务器的数据，可...
「jQuery系列」jQuery中Ajax的运用
日常笔记/总结/系列知识梳理
03-13 2464
jQuery Ajax 是 jQuery 提供的一个功能强大的异步通信方法，它允许网页与服务器之间进行数据交换，而无需重新加载整个页面。通过使用 Ajax，开发者可以实现更加流畅和响应式的用户体验，减少不必要的网络传输和页面加载时间。jQuery Ajax 的核心方法是$.ajax()，它提供了丰富的选项和回调函数，用于配置和执行 Ajax 请求。下面是一个基本的$.ajax()$.ajax({url: 'https://api.example.com/data', // 请求的 URL。
jQuery Ajax
苦涩
05-09 203
jQuery AjaxjQuery中文开发文档load()方法 jQuery中文开发文档 load()方法 jQuery load()方法作用是从服务器加载数据，是一个简单但强大的AJAX方法 load()：从服务器加载数据，然后返回到HTML放入匹配元素 语法：load(url, data, function(response, status, xhr)) 1、必需的URL参数规定希...
Ajax与jQuery
yananye的博客
03-29 332
认识Ajax 在传统的Web应用中，每次请求服务器都会生成新的页面，用户在提交请求后，总是要等待服务器的响应。如果前一个请求没有得到响应，则后一个请求就不能发送。由于这是一种独占式的请求，因此如果服务器响应没有结束，用户就只能等待或者不断刷新页面。在等待期间，由于新的页面没有生成，整个浏览器一片空白，而用户只能继续等待。对于用户而言，这是一种不连续的体验，同时，不断的刷新页面也会使服务器的负担加重。 Ajax技术正是为了弥补以上不足在诞生的，Ajax应用在使用javaScript异步发送请求，不用每次请求都
jQuery的ajax下载blob文件
10-21
主要介绍了jQuery的ajax下载blob文件的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下
jQuery-ajax-用户名异步请求
10-21
在Web开发中，jQuery是一个非常流行的JavaScript库，它极大地简化了DOM操作、事件处理以及Ajax交互。本主题聚焦于jQuery中的Ajax功能，特别是如何利用它进行异步用户名验证。Ajax，即Asynchronous JavaScript and ...
jQuery-AJAX.zip_jquery ajax
09-20
《jQuery与AJAX技术详解》 在Web开发领域，jQuery和AJAX是两个不可或缺的工具。jQuery是一个轻量级的JavaScript库，它极大地简化了JavaScript的使用，而AJAX（Asynchronous JavaScript and XML）则是一种使得网页...
jQuery和Ajax
12-23
关于jQuery和Ajax的简单介绍，可以学到jQuery特殊选择器和方法等的类型以及应用。
jQuery AJAX应用实例总结
01-19
本文实例总结了jQuery AJAX应用。分享给大家供大家参考，具体如下： AJAX 是指一种创建交互式网页应用的网页开发技术。 AJAX=异步JavaScript和XML（标准通用标记语言的子集）。 AJAX是一种用于创建快速动态网页的...
Ajax基础（应用场景｜jquery实现Ajax｜注意事项｜Ajax发送json数据｜Ajax携带文件数据）
Mchen的博客
11-20 5401
AJAX翻译成中文就是“异步Javascript和XML”。即使用Javascript语言与服务器进行异步交互也是用XML进行数据传输（当然，传输的数据不只是XML，目前更多的使用Json数据）。（XML应用于Web开发的许多方面，常用于简化数据的存储和共享）AJAX不是什么新的编程语言，而是一种使用现有标准的新方法AJAX最大的优点就是不需要重新加载整个页面的情况下，可以与服务器交换数据并更新网页内容（简单来说就是，在网页前端刚输入完数据，后端其实已经验证完数据了，不需要等点击提交了）
用jQuery实现Ajax
m0_53698336的博客
11-01 6656
Ajax 全称“Asynchronous JavaScript and XML”，译为“异步 JavaScript 和 XML”，程序员们习惯称之为“阿贾克斯”，它并不是一种技术，而是多种技术的综合体，其中包括 JavaScript、XML、JSON、DOM、CSS、HTML 以及最重要的 XMLHttpRequest 对象。通过 Ajax 可以异步从服务器请求数据并将数据更新到网页中，整个过程不需要重载（刷新）整个网页，可以将网页的内容更快的呈现给用户。 这里的异步是指，当程序执行到 Ajax 代码时，将
jQuery 与 Ajax
Wzc0720的博客
10-28 3778
可以在不重新加载整个网页的情况下，对网页的某部分进行更新。可以在不重新加载整个网页的情况下，对网页的某部分进行更新。简单说是需要连接数据库的地方，但是连接数据库传输的信息量很少，用不着刷新整个页面，这。简单说是需要连接数据库的地方，但是连接数据库传输的信息量很少，用不着刷新整个页面，这。减轻服务器的负担，按需取数，可以最大程度的减少冗余请求和响应对服务造成的负担。减轻服务器的负担，按需取数，可以最大程度的减少冗余请求和响应对服务造成的负担。种类型的适合用 ajax，避免了属性整个页面带来的资源浪费。
jQuery中的Ajax
weixin_45375510的博客
10-11 4502
jQuery×Ajax jquery提供多个与ajax有关的方法，通过jquery ajax方法，能够使用HTTP Get 和 HTTP Post 从远程服务器上请求文本、HTML、XML或JSON，同时能够把接收的数据更新到DOM对象。代替XMLHttpRequest，但其实jquery还是封装的异步对象。 (1)$.ajax() $.ajax()是jquery中ajax请求的核心方法，所有的其他方法都是在内部使用此方法。 语法： $.ajax({key: value, key: value, ...})
jQuery的Ajax实例（附完整代码）
热门推荐
Yuan_mingyu的博客
02-02 8万+
目录写在前边什么是AjaxAjax基本结构实例实例1实例2小结 写在前边 作为一个前端刚入门没多久的小白，想在这里分享一下我的学习内容，就算是学习笔记了。因为前端的大部分学习都是通过网站上的教程，所以遇到不懂得问题，也只有求助于网络，通过度娘，了解到了一些论坛、博客。在发现了众多技术大牛的同时，我也发现，一些像我这样的小白，由于能力有限，在查找相关资料的时候，对于大佬的一些操作理解困难，虽说能照猫...
jQuery-Ajax（详解）
sunshao904
05-30 2万+
安装Web环境 Ajax方法需要与Web服务器端进行交互，需要有环境才可正常使用，安装环境的工具包有很多，可以选择自行下载。 jQuery中的Ajax 在jQuery中，$.Ajax()方法属于最底层的方法，第2层是load()，$.get()，和$.post()，第3层是$.getScript()和$.getJSON()方法。 一、 load( ) 方法 结构load( url , [data] , [callback] ) 参数解释 捕获.PNG 1.1 应用 1.1.1首先构建一
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值