jquery的函数实现Ajax

最新推荐文章于 2023-10-04 19:46:14 发布
最新推荐文章于 2023-10-04 19:46:14 发布
阅读量1.1k 收藏 9
点赞数
分类专栏： jQuery Ajax 文章标签： ajax jquery
本文为博主原创文章，未经博主允许不得转载。如有问题，欢迎指正。
本文链接：https://blog.csdn.net/weixin_43725517/article/details/108152495
版权

Ajax实现方式

1、$.ajax()

2、$.get() 

3、$.post() 

4、$.getJSON()

5、$("#form1").serialize()

1、$.ajax()

$.ajax() 是 jQuery 中 AJAX 请求的核心方法，所有的其他方法都是在内部使用此方法。 

语法： 

        $.ajax( { name:value, name:value, ... } ) 

属性：

属性表示含义
async 布尔类型值，表示请求是否异步，默认值是true。可以不写
url表示请求的地址

type

表示请求的类型 GET | POST
data

表示发送给服务器的数据 

格式有两种：

1、name=value1&age=value2

2、{name:value1, age:value2}

success

请求成功，响应的回调函数

success:function (data) {

            //data是回调时传回来的参数
           alert(data);//这个是响应服务器的处理结果
           $("#result").text(data);
 }

error请求失败，响应的回调函数
dataType响应的数据类型  可以是JSON、test、xml，不过json比较使用多

案例代码演示：

html页面：

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
    <script>
        function doAjax(){
            $.ajax({
                url:"bmiAjax",
                type:"POST",
                data:"name="+$("#name").val()+"&height="+$("#height").val()+"&weight="+$("#weight").val(),
                success:function (data) {
                    alert(data);//这个是响应服务器的处理结果
                    $("#result").text(data);
                },
                error:function () {
                    alert("error！！！");
                },
                dataType:"json"
            })
        }
    </script>
</head>
<body>
    姓名: <input type="text"id="name" name="name"/><br/>
    体重（kg）<input type="text" id="weight" name="weight"/><br/>
    身高(米)<input type="text" id="height" name="height"/><br/>
    <input type="button" value="计算BMI"onclick="doAjax()">
    <div id="result">

    </div>
</body>
</html>

servlet：

package cn.com.Ycy.Ajav;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
@WebServlet("/bmiAjax")
public class AjaxServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        super.doGet(req,resp);
    }
    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        resp.setCharacterEncoding("utf-8");
        String name = req.getParameter("name");
        String weight = req.getParameter("weight");
        String height = req.getParameter("height");
        float w = Float.parseFloat(weight);
        float h = Float.parseFloat(height);
        float bmi = w / (h * h);
        String msg = "";
        if (bmi < 18.5) {
            msg = ""+name+"比较廋";
        } else if (bmi > 18.5 && bmi <= 23.9) {
            msg = ""+name+"的bmi是正常的";
        } else if (bmi <= 27 && bmi > 23.9) {
            msg =""+name+"比较胖";
        }else {
            msg=""+name+"特别胖哦";
        }
        System.out.println(msg);
        System.out.println("sbsb");
        resp.getWriter().write(msg);
    }
}

2、$.get() 

属性含义

url

表示请求的地址
data

表示发送给服务器的数据 

格式有两种：

1、name=value1&age=value2

2、{name:value1, age:value2}

callback请求成功，响应的回调函数
dataType响应的数据类型  可以是JSON、test、xml，不过json比较使用多

更简化代码了

<script>
        function doAjax(){
            $.get("bmiAjax",{name:"ycy",height:1.75,weight:58},function (data) {
                alert(data);
            },"json")
        }
</script>

3、$.post() 

属性含义

url

表示请求的地址
data

表示发送给服务器的数据 

格式有两种：

1、name=value1&age=value2

2、{name:value1, age:value2}

callback请求成功，响应的回调函数
dataType响应的数据类型  可以是JSON、test、xml，不过json比较使用多

代码演示 

<script>
    function doAjax(){
          $.post("bmiAjax",{name:"ycy",height:1.75,weight:58},function (data) {
             alert(data);
         },"json")
     }
</script>

4、$.getJSON()

         通过HTTP GET请求，请求载入JSON数据，请求方式和回调数据类型是固定的，请求方式是GET，数据返回是JSON格式

属性含义

url

表示请求的地址
data

表示发送给服务器的数据 

格式有两种：

1、name=value1&age=value2

2、{name:value1, age:value2}

callback请求成功，响应的回调函数

$.get()和$.post()都是四个参数而这个只要三个参数即可,代码演示 

<script>
    function doAjax(){
          $.getJSON("bmiAjax",{name:"ycy",height:1.75,weight:58},function (data) {
             alert(data);
         })
     }
</script>

5、$("#form1").serialize()

可以把表单的所有参数都获取到，并以name=value&age=value2的形式拼接起来

$("#form1").serialize()需要都哪个表单绑定起来。

<script>
   $("#btn").click(function(){
    alter($("form1").serialize());
})
</script>

 

放肆的青春゛つ
关注
专栏目录
jQuery中的AJAX请求
weixin_45650502的博客
03-29 1169
jQuery中发起Ajax请求的常用三种方法： $.get() $.post $.ajax
JQuery中的Ajax请求方式
YCQNB_的博客
02-27 2189
1.了解jQuery中的Ajax 在浏览器中提供了XMLHttpRequest用法比较复杂，因此jQuery对XMLHttpRequest进行了封装，提供了一系列Ajax相关的函数，降低了Ajax的使用难度，提高了工作中的工作效率 2.$.get()函数 1.jQuery中的$.get()函数专门用来发起get请求,从而将服务器上的资源请求到客服端进行使用 $.get()函数的语法格式 $.get(url,[data],[callback]) url：要请求的资源地址 data:请求资源期间要
Ajax跨域请求问题
cx9977的博客
09-19 326
Ajax跨域请求问题 什么是跨域？ 跨域，指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器施加的安全限制。 1.同源策略含义 1995年，同源政策由 Netscape 公司引入浏览器。目前，所有浏览器都实行这个政策。 最初，它的含义是指，A网页设置的 Cookie，B网页不能打开，除非这两个网页"同源"。所谓"同源"指的是"三个相同"。 ！协议相同 ！域名相同 ！端口相同 2.同源策略目的 是为了保证用户信息的安全，防止恶意的网站窃取数据 设想这样一种情况：A网站是一家银行，用
jQuery实现ajax请求
qq_49044908的博客
11-13 4048
jQuery实现ajax请求 在没学习jQuery之前,发送ajax是比较麻烦的一个过程,需要四个步骤,jQuery将这些个步骤简化了,使用起来更加方便快捷 相关函数 $.ajax() : 它是jQuery中实现ajax的核心函数 $.post() : 这个函数是使用post方式发送ajax请求 $.get() : 这个函数是使用get的方式发送ajax请求 $.post() 和 $.get() 它们都是在内部调用了 $.ajax() ,所以 $.ajax() 是核心函数 $.ajax() 的使用 这个
JQuery发送AJAX请求
gcsyzy的博客
04-01 1601
JQuery发送AJAX请求的三种方式：$get()，$post()，$ajax()
jQuery实现ajax回调函数带入参数的方法示例
12-09
在本示例中，我们将探讨如何在jQuery中使用AJAX的回调函数，并将额外的参数传递给它。 首先，让我们回顾一下基础的AJAX调用。在jQuery中，我们通常使用`$.ajax()`, `$.get()`, 或者 `$.post()`方法来发起一个异步...
jQuery+ajax实现用户登录验证
10-14
总的来说，使用jQuery和Ajax实现用户登录验证是一种常见且高效的方法，它提供了流畅的用户体验，同时保持了数据的安全性。通过这种方式，我们可以在不影响其他页面元素的情况下进行后台验证，提高了Web应用的交互性...
jQuery实现的AJAX简单弹出层效果代码
10-23
常见的AJAX调用方法是jQuery的$.ajax()方法，通过配置它的各种参数，例如url、data、success回调函数等，可以方便地实现与后端的数据交互。 在success回调函数中，通常会处理从服务器返回的数据，并动态更新弹出层...
jQuery实现的Ajax函数（已测试）——ASP
03-20
**jQuery实现的Ajax函数在ASP中的应用** Ajax（异步JavaScript和XML）技术允许网页在不重新加载整个页面的情况下与服务器交换数据并更新部分网页内容，显著提升了用户体验。jQuery库简化了JavaScript的Ajax操作，...
jquery实现Ajax请求
qq_51635297的博客
11-09 8078
jquery实现Ajax请求
jq中的ajax请求
奇奇的博客
05-09 438
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script> <!-- <script src="js/jquery.validate.js" ty.
jQuery中实现AJAX请求
weixin_62922379的博客
05-18 870
以上是jQery对Ajax发送请求里面 可能涉及到jQuery,bootstrap,axios, 如果不想去下载 我们可以。type：设置返回内容格式，xml, html, script, json, text, _default。中找到对应的在线链接 我们使用的时候使用标签引入即可。callback：请求的载入成功时的回调函数。里面的参数与get请求一致。// 配置baseURL。url:请求的url地址。data:请求的参数。
jquery ajax参数详解
冲出仁川，走出马德里，故事还会再继续
01-10 1446
Jquery中的AJAX参数 url,[settings] url:一个用来包含发送请求的URL字符串。 settings:AJAX 请求设置。所有选项都是可选的。 settings：选项 accepts type:Map 默认： 取决于数据类型。 内容类型发送请求头，告诉服务器什么样的响应会接受返回。如果accepts设置需要修改，推荐在$.ajaxSetup()方法中做一次。 async type:boolean (默认: true) 默认设置下，所有请求均为异步请求。如果需要发送同步请求，请将
JQuery 的 Ajax 请求(重点****)
一个菜鸡的博客
10-24 545
【代码】JQuery 的 Ajax 请求(重点****)
使用jQuery进行AJAX请求
最新发布
BrchCpp的博客
10-04 244
AJAX（Asynchronous JavaScript and XML）是一种在网页中进行异步通信的技术，它允许网页通过后台服务器发送和接收数据，而无需刷新整个页面。jQuery是一个流行的JavaScript库，它简化了AJAX请求的处理过程，提供了一套简洁而强大的API。记住，AJAX是一种强大的技术，可以改善用户体验并使网页更加动态和交互。函数，你可以方便地发送和接收数据，并根据服务器的响应进行相应的处理。回调函数会在请求成功时被调用，并将服务器返回的数据作为参数传入。参数指定了请求的URL地址，
jQuery中的Ajax
weixin_30244889的博客
06-13 139
jQuery中的Ajax----------------**ajax()方法**1. ajax()方法是功能最强大最齐全的请求服务器数据的方法2. ajax()能够获取服务器返回的数据3. ajax()能够向服务器发送并传递数值调用的格式：`jQuery.ajax([settings])`或`$.ajax([settings])`参数[settings]为发送ajax()请...
jQuery中ajax的参数
小羊的博客
09-01 318
1、url：请求数据的路径 2、type：请求方式，（get、post、put、delete、patch），如果不写默认为get，工作中最常用的是get和post两种【一般客户端向服务端请求数据使用get方法，客户端向服务端传送数据使用post方法】，具体情况具体分析。 3、async：同异步，（true、false），默认为true；true为：异步请求，false为同步请求；同步请求需要等到数...
JQuery下的ajax请求
太多的虚幻
08-16 2259
开始ajax请求通常能解决我们前后端交互的问题，下面列出了通用的ajax请求方法。 “` (document).ready(function(){(document).ready(function(){ (“#but”).click(function(){ var tel = document.getElementById(“tel”).value; //
使用jQuery轻松实现Ajax开发
文中将展示如何使用jQuery来实现Ajax功能，并与传统的JavaScript DOM操作进行对比，强调jQuery的高效和便捷性。" 在Web开发中，Ajax（异步JavaScript和XML）是一种关键的技术，用于实现页面的无刷新更新。然而，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值