基于JQuery的Ajax+JSON（全）

已于 2022-05-20 20:02:51 修改
阅读量4k 收藏 8
点赞数 2
分类专栏： Java web 文章标签： java
于 2022-04-12 19:05:36 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_47518713/article/details/124114758
版权

 

Asynchronous JavaScript And XML的缩写：异步的 JavaScript 和 XML AJAX

AJAX 不是新的编程语言，而是使用现有技术混合使用的一种新方法。ajax 中使用的技术有 JavaScript, html , dom , xml ,css 等。主要是 JavaScript , XML.异步加载，客户端和服务器的数据交互更新在局部⻚⾯的 技术，不需要刷新整个⻚⾯（局部刷新）

 优点： 1、局部刷新，效率更⾼ 2、⽤户体验更好

 先用一个例子来开篇吧(jsp发起请求，Servlet接收

我们先来从同步开始讲，再到异步

全局刷新

 

 

 此时浏览器只能显示result.jsp页面，其他用户什么都看不到

怎么才能局部刷新呢，这里就要用到JQuery封装的  AJAX

 

AJAX 不单需要前端的技术，同时需要后端（服务器）的配合。服务器需要提供数据，数据 是 AJAX 请求的响应结果。

最低0.47元/天 解锁文章
听~宇
关注
  • 2
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
[Jquery]Jquery AJAX post提交json示例
德仔
01-23 1万+
下面是html请求web服务器api接口的示例，是post发送json方式请求。 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <meta charset="utf-8" /> <script src="
Ajax中的json实现及使用jQuery实现Ajax
2202_75384458的博客
12-13 1159
JS对象标记) 是一种轻量级的数据交换格式。JSON 指的是 JavaScript 对象表示法（JavaScript Object Notation）JSON 是存储和交换文本信息的语法。类似 XML。JSON 比 XML 更小、更快，更易解析。JSON 是轻量级的文本数据交换格式JSON 独立于语言 *JSON 具有自我描述性，更易理解JSON 语法是 JavaScript 对象表示法的子集：数据在键/值对中，键/值对可以嵌套数据由逗号分隔花括号保存对象，对象可以包含多个键/值对。
php后台接收ajax发送post请求提交json数据的两种方式
Blue_Sky_rain的博客
04-08 1921
今天做php的一个项目，打算用jquery ajax向后台发送post类型请求，发送的数据类型是json。但是频频出错，不是报500错误，就是在后取的值为空的。几经周折才把问题解决。 总结了两种ajax发送post请求的写法： 前端关键代码1： //变量data是我的js对象经过JSON.stringify(data)处理之后的json字符串 $.ajax({ conte...
jq ajax json实例,jQuery基于ajax操作json数据简单示例
weixin_39718286的博客
08-05 653
本文实例讲述了jQuery基于ajax操作json数据的方法。分享给大家供大家参考，具体如下：jQuery Ajax 实例演示jQuery Ajax 的三种格式，在与后台进行数据交互的时候可以是json格式也可以是xml格式，本人建议将数据转化成json格式。Xml与json的比较1、可读性JSON和XML的可读性可谓不相上下，一边是建议的语法，一边是规范的标签形式，很难分出胜负。2、可扩展性XM...
Ajax学习笔记（二）：jQuery 中的 AJAX、axios发送AJAX请求、AJAX-jQuery通用方法发送AJAX请求、fetch发送AJAX请求、同源策略、JSONP、CORS
weixin_62764364的博客
04-09 1136
type:设置返回内容格式，xml, html, script, json, text, _default。实现用户校验，服务端响应体是一个函数，先声明handle函数，然后创建script标签，利用src属性请求数据。type:设置返回内容格式，xml, html, script, json, text, _default。AJAX默认遵循同源策略。这是一个跨原的一个请求的设置，匿名的意思，加上这个请求时将不会写在当前域名的。案，它的特点是不需要在客户端做任何特殊的操作，完全在服务器中进行处理，支持。
java+ajax+json+jquery完整实例
01-09
实现了java+ajax+json+jquery的完整实例，包括ajax+jquery向后台传参，后台传输json数据到前台ajax接收。里面有自己遇到的四个问题，及解决的具体办法。
jquery+ajax+json例子
08-28
在Web开发中，jQuery、Ajax和JSON是三个非常重要的技术，它们共同构成了高效、动态的用户界面的基础。本文将深入探讨这些技术，并结合一个名为"TestJQuery"的示例来展示它们如何协同工作。 首先，jQuery是一个...
基于Jquery+Ajax+Json实现分页显示附效果图
08-14
基于Jquery+Ajax+Json实现分页显示附效果图
使用Jquery+Ajax+Json如何实现分页显示附JAVA+JQuery实现异步分页
10-23
本文给大家介绍基于jquery+ajax+json实现数据分页显示，以及JAVA+JQuery实现异步分页，本文代码简单易懂，非常具有参考价值，感兴趣的朋友一起学习吧
web前端+jquery与ajax+json+手写前端完全实现分页
最新发布
05-14
本主题聚焦于"web前端+jQuery与Ajax+JSON+手写前端完全实现分页"，这是一种高效的方法来处理大量数据，提升用户体验，同时减轻服务器压力。下面将详细介绍这些关键技术点。 **jQuery** 是一个快速、简洁的...
在jquery ajax中对postjson进行简略封装
qq_44065607的博客
08-29 315
jquery中关于ajax只对get，getpost，post进行了一个封装，当使用者要用post方式发送json数据时就需要调用$.ajax方法 多次下来 比较麻烦。个人对postjson进行了一个简易封装。
jquery和json结合实现ajax
11-15
本人用eclipse开发工具写的下拉框
什么是Ajax和json？？？
07-25
本文详细总结了ajax和json的使用方法和详细示例。
使用JQ的AJAX来读取JSON文件
面具哥布林的博客
10-26 2384
如果学习过如何用原生JS来读取JSON文件，那么学习如何用JQ来读取JSON文件简直是小菜一碟。 JSON文件的内容： [{ "key":"value" } ] 直接放入JS源代码: $(document).ready(function(){ $.getJSON('json.json',function(data){ for(var name in
使用jQuery提供的ajax函数实现局部刷新
fly_can_reach的博客
10-16 663
需求:在浏览器不跳转页面的条件下实现从后台获取数据并且局部刷新页面 需要的插件： 1.在 WEB-INF 目录下创建 lib 目录，拷贝 jar 文件 2.创建目录 js，拷贝 jQuery.js 文件 index.jsp 先导入js <script type="text/javascript" src="js/jquery-3.4.1.js"></script> 随便加点东西 <body> <div> name:..
jquery - ajax发送json请求
我的博客
05-22 829
世界上并没有完美的程序，但是我们并不因此而沮丧，因为写程序就是一个不断追求完美的过程。 <script> var data = {}; data.name1 = '1'; data.name2 = '2'; $.ajax({ url : 'http://localhost:8080/test', .
本文简单讲诉jQuery处理json与ajax返回的Json的一个例子
weixin_36219174的博客
11-10 1548
JSON中对象通过“{}”来标识，一个“{}”代表一个对象，如{“pwd”:”123”}，对象的值是键值对的形式（key：value）。  “[]”，标识数组，数组内部各个数据之间通过“，”分割,一个数组中可以有很多对象，具体表现形式如下： [{"pwd":"adminpwd01","userName":"admin01"},{"pwd":"adminpwd02","userName":"ad
jquery ajax post方法获取json数据
超级赛亚人
11-27 1305
前端 html> http-equiv="Content-Type" content="text/html; charset=utf-8"/> 无标题文档 src="images/jquery.min.js"> $(document).ready(function () { $("#btn").click(function ()
jquery ajax设置header的两种方式
热门推荐
行成于思毁于随
06-13 2万+
一、setting参数 headers $.ajax({ headers: { Accept: "application/json; charset=utf-8" }, type: "get", success: function (data) { } }); 二、beforeSend方法 $("#t
jquery+ajax+json简单的登录注册
06-01
好的，下面是一个简单的 jQuery、Ajax 和 JSON 实现的登录注册示例： HTML 代码： ```html <form id="loginForm"> <input type="text" name="username" placeholder="用户名"><br> <input type="password" name="password" placeholder="密码"><br> <button type="submit">登录</button> </form> <form id="registerForm"> <input type="text" name="username" placeholder="用户名"><br> <input type="password" name="password" placeholder="密码"><br> <input type="password" name="confirmPassword" placeholder="确认密码"><br> <button type="submit">注册</button> </form> ``` jQuery 代码： ```javascript $(function () { // 登录表单提交 $('#loginForm').submit(function (e) { e.preventDefault(); // 阻止表单默认提交行为 var data = $(this).serialize(); // 序列化表单数据 $.ajax({ url: '/api/login', type: 'POST', data: data, dataType: 'json', // 响应数据类型为 JSON success: function (response) { alert(response.msg); // 弹出响应消息 if (response.code === 0) { // 登录成功，跳转到首页 window.location.href = '/'; } }, error: function () { alert('网络错误，请稍后再试！'); } }); }); // 注册表单提交 $('#registerForm').submit(function (e) { e.preventDefault(); // 阻止表单默认提交行为 var data = $(this).serialize(); // 序列化表单数据 $.ajax({ url: '/api/register', type: 'POST', data: data, dataType: 'json', // 响应数据类型为 JSON success: function (response) { alert(response.msg); // 弹出响应消息 if (response.code === 0) { // 注册成功，跳转到登录页面 window.location.href = '/login'; } }, error: function () { alert('网络错误，请稍后再试！'); } }); }); }); ``` 后端接口代码（使用 Express 框架）： ```javascript const express = require('express'); const bodyParser = require('body-parser'); const app = express(); app.use(bodyParser.urlencoded({ extended: false })); app.use(bodyParser.json()); // 模拟用户数据 let users = [ { username: 'admin', password: 'admin123' } ]; // 登录接口 app.post('/api/login', (req, res) => { const { username, password } = req.body; const user = users.find(u => u.username === username && u.password === password); if (user) { res.json({ code: 0, msg: '登录成功！' }); } else { res.json({ code: -1, msg: '用户名或密码错误！' }); } }); // 注册接口 app.post('/api/register', (req, res) => { const { username, password, confirmPassword } = req.body; if (username && password && confirmPassword && password === confirmPassword) { const user = users.find(u => u.username === username); if (user) { res.json({ code: -1, msg: '用户名已存在！' }); } else { users.push({ username, password }); res.json({ code: 0, msg: '注册成功！' }); } } else { res.json({ code: -1, msg: '参数错误！' }); } }); app.listen(3000, () => { console.log('Server started on port 3000'); }); ``` 注意，这只是一个简单的示例，实际应用中还需要进行参数校验、加密等操作，以确保安全性。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值