ajax基础知识

最新推荐文章于 2023-08-11 11:15:54 发布

? passionn�

最新推荐文章于 2023-08-11 11:15:54 发布

阅读量73

点赞数

分类专栏：训练营文章标签： ajax jquery

本文链接：https://blog.csdn.net/weixin_45747607/article/details/120048010

版权

训练营专栏收录该内容

36 篇文章 0 订阅

订阅专栏

本文介绍了如何利用jQuery的Ajax方法实现网页应用的异步无刷新更新，包括GET和POST请求的示例，以及$.getJSON在处理JSON数据时的使用。通过$.ajax的success和error回调，实现在评论、数据获取等场景中的无缝更新。

摘要由CSDN通过智能技术生成

1jquery Ajax 异步无刷新技术

Ajax异步无刷新技术就类似于微信QQ的朋友圈评论，直接更改数据而不用刷新，否则的话，每次评论完过后刷新一下，就会又从第一条说说重新往下看，太麻烦。所以说此技术主要是提高用户的体验度！
Ajax一般是和DOM一起操作的，Ajax是直接更改数据库数据，但不刷新页面就达不到评论后新内容的样式，所以就需要DOM操作把页面更改，等下次再次进入的时候系统自动刷新就可以从数据库拿新数据。
https://blog.csdn.net/li123128/article/details/80650256

2jquery调用ajax方法：

格式：$.ajax({});
参数：
- type：请求方式GET/POST
- url:请求地址url
- async：是否异步，默认是true表示异步
- data：发送到服务器的数据
- dataType：预期服务器返回的数据类型 json、text、html
- contentType：设置请求头
- sucess：请求成功时调用此后跟函数
- error：请求失败时调用此函数

3 get请求

在这里插入图片描述

4post请求
在这里插入图片描述
5 $.get
简单的GET请求功能取代复杂 $.ajax(但不够灵活）
请求成功时可调用回调函数，如果需要在出错时执行函数，请使用 $.ajax

// 1.请求json文件，忽略返回值
$.get(‘js/cuisine_area.json’);

// 2.请求json文件，传递参数，忽略返回值
$.get(‘js/cuisine_area.json’,{name:“tom”,age:100});

// 3.请求json文件,拿到返回值,请求成功后可拿到返回值
$.get(‘js/cuisine_area.json’,function(data){ console.log(data); });

// 4.请求json文件,传递参数,拿到返回值
$.get(‘js/cuisine_area.json’,{name:“tom”,age:100},function(data){ console.log(data); });

6 $.post
// 1.请求json文件，忽略返回值 $.post(’…/js/cuisine_area.json’);

// 2.请求json文件，传递参数，忽略返回值 $.post(‘js/cuisine_area.json’,{name:“tom”,age:100});

// 3.请求json文件,拿到返回值,请求成功后可拿到返回值 $.post(‘js/cuisine_area.json’,function(data){ console.log(data); });

// 4.请求json文件,传递参数,拿到返回值 $.post(‘js/cuisine_area.json’,{name:“tom”,age:100},function(data){ console.log(data); });

7 $.getJSON

表示请求返回的数据类型是JSON格式的ajax请求

$.getJSON(‘js/cuisine_area.json’,{name:“tom”,age:100},function(data){ console.log(data); // 要求返回的数据格式是JSON格式 });

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ajax</title>
    <script src="js/jquery-3.6.0.js"></script>
</head>
<body>
  <button id="btn">请求</button>
  <form action="">
    <input type="text" name="uname">
    <input type="password" name="upwd">
  </form>
  <!--
    ajax : 实现异步无刷新技术
    语法:
      $.ajax({
        type: '请求方式 get|post',
        url : '请求地址',
        data : 发送到服务器的数据,
        dataType : '预期服务器响应数据的类型json|text|html',
        success : function(data){
          成功时候的回调函数
        },
        error: function(){
          失败时候的回调函数
        }
      });
  -->
  <script>
      $("#btn").bind('click',function () {
        console.log("我要发送请求喽!!!");
        console.log($('[name="uname"]').serialize());
        $.ajax({
          type : 'post',
          url : 'js/data.json',
          data : $("form").serialize(),
          dataType : "json",
          success : function (data) {
            console.log(data);
            console.log(data.data);
          },
          error : function () {
            console.log("失败!!!!");
          }
        });
      })


      $.get('js/data.json',{name:"tom",age:100},function(data){
        console.log("这是$.get");
        console.log(data);
      });

      $.post('js/data.json',{name:"tom",age:100},function(data){
        console.log("这是$.post");
        console.log(data);
      });
  </script>
</body>
</html>

Data.jason

{
  "code": 0,
  "msg": "成功",
  "data": [
    {
      "username": "zhangsan",
      "password": "123",
      "age": 18
    },
    {

      "username": "wangwu",
      "password": "123",
      "age": 18
    },
    {

      "username": "lisi",
      "password": "123",
      "age": 18
    }



  ]

}

? passionn�

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
ajax基础知识

1jquery Ajax 异步无刷新技术Ajax异步无刷新技术就类似于微信QQ的朋友圈评论，直接更改数据而不用刷新，否则的话，每次评论完过后刷新一下，就会又从第一条说说重新往下看，太麻烦。所以说此技术主要是提高用户的体验度！Ajax一般是和DOM一起操作的，Ajax是直接更改数据库数据，但不刷新页面就达不到评论后新内容的样式，所以就需要DOM操作把页面更改，等下次再次进入的时候系统自动刷新就可以从数据库拿新数据。https://blog.csdn.net/li123128/article/detail
复制链接

扫一扫

专栏目录