JS实现AJAX完整Demo

最新推荐文章于 2024-04-22 12:12:03 发布
最新推荐文章于 2024-04-22 12:12:03 发布
阅读量1.4k 收藏 1
点赞数
分类专栏： AJAX
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42397777/article/details/102602505
版权

1.请求类型为POST

post.jsp

<%--
  Created by IntelliJ IDEA.
  User: 杨帆
  Date: 2019/10/17
  Time: 11:12
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <script>
        function onclickAjax() {
//            第一步：创建XMLHttpRequest对象
            var xhr = null;
            if(window.XMLHttpRequest){
                // 兼容 IE7+, Firefox, Chrome, Opera, Safari
                xhr = new XMLHttpRequest();
            }else{
                //兼容 IE6, IE5
                xhr = new ActiveXObject("Microsoft.XMLHTTP")
            }
//            第二步：设置请求方式
            xhr.open("POST","ajaxPost",true);
//            第三步：发送请求
            xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
            xhr.send("name=yangfan&password=123");
//            第四步：设置回调函数
            xhr.onreadystatechange = function () {
                if(xhr.readyState==4 &&xhr.status==200){
                    document.getElementById("test").innerHTML = xhr.responseText;
                }
            }
        }
    </script>
</head>
<body>
<input type="button" value="测试" onclick="onclickAjax()">
<div id="test"></div>
</body>
</html>

服务器端的代码：

@RequestMapping("ajaxPost")
    public void ajaxPost(HttpServletRequest request, HttpServletResponse response) throws IOException {
        String name = request.getParameter("name");
        String password = request.getParameter("password");
        System.out.println(name);
        System.out.println(password);
        String str = "Post";
        response.getWriter().write(str);
    }

进行测试：
在这里插入图片描述
点击测试
在这里插入图片描述
控制台：

yangfan
123

2.请求类型为Get时

get.jsp

<%--
  Created by IntelliJ IDEA.
  User: 杨帆
  Date: 2019/10/17
  Time: 11:12
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <script>
        function onclickAjax() {
            var xhr = null;
            if(window.XMLHttpRequest){
                // 兼容 IE7+, Firefox, Chrome, Opera, Safari
                xhr = new XMLHttpRequest();
            }else{
                //兼容 IE6, IE5
                xhr = new ActiveXObject("Microsoft.XMLHTTP")
            }
//            第二步：设置请求方式
            xhr.open("GET","ajaxGet?name=yangfan&password=123",true);
//            第三步：发送请求
            xhr.send();
//            第四步：设置回调函数
            xhr.onreadystatechange = function () {
                if(xhr.readyState==4 &&xhr.status==200){
                    document.getElementById("test").innerHTML = xhr.responseText;
                }
            }
        }
    </script>
</head>
<body>
<input type="button" value="测试" onclick="onclickAjax()">
<div id="test"></div>
</body>
</html>

服务器端的代码:

@RequestMapping("ajaxGet")
    public void ajaxGet(HttpServletRequest request, HttpServletResponse response) throws IOException {
        String name = request.getParameter("name");
        String password = request.getParameter("password");
        System.out.println(name);
        System.out.println(password);
        String str = "Get";
        response.getWriter().write(str);
    }

进行测试：
在这里插入图片描述
点击测试

在这里插入图片描述
控制台：

yangfan
123

3.参考博客

Ajax原理
快速掌握Ajax

4.补充JQuery实现AJAX

<%--
  Created by IntelliJ IDEA.
  User: 杨帆
  Date: 2019/10/17
  Time: 11:35
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Jpost</title>
    <script src="js/jquery.min (1).js"></script>
    <script>
        $(function(){
            $("#haha").click(function(){
                $.ajax({
                    type:"POST",
                    url:"ajaxPost",
                    data:"name=yangfan&password=123",
                    success:function (msg) {
                        alert(typeof msg );
                        $("#test").html(msg);
                    }
                });
            });
        });
    </script>
</head>
<body>
<input id="haha" type="button" value="测试">
<div id="test"></div>
</body>
</html>

效果和上面的js实现一样，当请求类型为GET时，只需要将type:“POST”,改为type:"GET"即可

5 AJAX与json的运用

今天下午看了一下ajax与json，说说自己的理解。

1.首先json是对象表示法（JavaScript Object Notation） 是一种存储数据的方式。在js中我们可以通过对象.属性名的形式取出json中的值，这样十分方便我们取值。

2.在ajax中如果我们从后台传过来的数据类型可以转化成json，那么前后端的数据传递将会变得十分方便。

举例：
test.jsp

<%--
  Created by IntelliJ IDEA.
  User: 杨帆
  Date: 2019/10/17
  Time: 15:52
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <script src="js/jquery.min%20(1).js"></script>
    <script>
        $(function(){
            $("#but").click(function(){
                $.ajax({
                    type:"POST",
                    url:"test",
                    data:"name=haha&password=123",
                    dataType:"json",
                    success:function (msg) {
                        alert(typeof msg);
                        alert(msg);
                        $("#test").append(msg.name);
                        $("#test").append(msg.password);
                        $("#test").append(msg.age);
                    },
                    error:function(){
                        alert("系统错误！");
                    }
                });
            });
        });
    </script>
</head>
<body>
<button id="but">测试</button>
<div id="test"></div>
</body>
</html>

后台代码：

@RequestMapping("test")
    public void test1(HttpServletRequest request, HttpServletResponse response) throws IOException {
        String name = request.getParameter("name");
        String password = request.getParameter("password");
        System.out.println(name);
        System.out.println(password);
        Map<String,Object> map = new HashMap<>();
        map.put("name","tht");
        map.put("password",520);
        map.put("age",20);
        Gson gson = new Gson();
        String str = gson.toJson(map);
        System.out.println(str);
        response.getWriter().write(str);
    }

我这里使用了Google的Gson将map转化成json的字符串形式，传递给前端。然后我们只需要在前端将字符串形式的json数据转化成json即可。dataType:"json"帮我们做到了这一点。如果不使用这个属性，你可以这样来转化

var json = JSON.parse(msg);

之后，在js中我们就可以使用对象.属性来取出服务器传过来的所有数据，很方便！

孤独即自由
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JS ajax 例子
qq_34851243的博客
05-26 1万+
用 js ， jQuery 编写 ajax 的样式，三种写法，例子： //用 js 原生写法 function sendGet(url){ xhr.onreadystatechange =function(){ if(xhr.readyState == 4 && xhr.status == 200){ //获取服务器响应 document...
js实现简单实用的AJAX完整实例
10-22
主要介绍了js实现简单实用的AJAX的方法,以完整实例形式分析了ajax无刷新调用的具体实现步骤与相关技巧,代码备有详尽的注释便于理解,需要的朋友可以参考下
在 JS 中如何使用 Ajax 来进行请求
最新发布
peixiancccc的博客
04-22 2200
javascript是前端必要掌握的真正算得上是编程语言的语言，学会灵活运用javascript，将对以后学习工作有非常大的帮助。掌握它最重要的首先是学习好基础知识，而后通过不断的实战来提升我们的编程技巧和逻辑思维。这一块学习是持续的，直到我们真正掌握它并且能够灵活运用它。如果最开始学习一两遍之后，发现暂时没有提升的空间，我们可以暂时放一放。继续下面的学习，javascript贯穿我们前端工作中，在之后的学习实现里也会遇到和锻炼到。真正学习起来并不难理解，关键是灵活运用。
js中的Ajax经典示例
花心萝卜
06-09 302
js中的Ajax经典示例 function ajax() { //先声明一个异步请求对象 var xmlHttpReg = null; if (window.ActiveXObject) {//如果是IE xmlHttpReg = new ActiveXObject
$.ajax()实现ajax语法格式及完整案例
pig_pig32的博客
08-23 3548
$.ajax()代码模板 jQuery实现ajax语法为：$.ajax({})，其中{}为对象，对象里面的key键是固定的，比如: 1、type: 表示请求方式，一般为post或get 2、url表示请求的地址 3、contentType表示发送信息至服务器时内容编码类型 4、data表示发送到服务器的数据 5、dataType表示预期服务器返回数据的类型如：text，json，xml等等类型 6、success表示请求成功后的回调函数 7、error自动判断 (xml 或 html)。请求失败时调用此函数
JavaScript基础之AJAX简单的小demo
10-20
主要介绍了JavaScript基础之AJAX简单的小demo ，代码简单易懂，非常不错，具有参考借鉴价值，需要的朋友参考下
JavaScript实现图片上传并预览并提交ajax（完整demo）
03-31
这个完整DEMO展示了如何利用JavaScript、AJAX和HTML5的File API来实现这一过程。以下是对这个功能的详细解析： 1. **HTML结构**： 首先，我们需要在`index.html`文件中创建一个表单，包含一个文件输入元素（`...
Node.js解析ajax参数Demo
07-05
**Node.js解析Ajax参数Demo** 在Web开发中，前端与后端的数据交互是必不可少的，Ajax（Asynchronous JavaScript and XML）技术就是实现这种交互的重要手段。在这个“Node.js解析Ajax参数Demo”中，我们将深入探讨...
demo跨域ajax_DEMO_ajax跨域_
09-30
本示例“demo跨域ajax_DEMO_ajax跨域”着重解决C#后端与JavaScript前端之间的跨域限制。这里我们将深入探讨什么是跨域、为何会产生跨域问题以及如何通过C#和Ajax实现跨域通信。 首先，我们需要了解什么是跨域。根据...
一个完整的jquery+ajax传送请求的实例
08-18
一个完整的jquery+ajax传送请求的实例
很简单的几个java&ajax的小demo
09-26
这是为初学者了解java里的ajax上传的小demo，希望能帮你点小忙...嘻嘻
Ajax+JQuery应用Demo
05-11
工作之余写的一些Ajax应用，有6个Demo,数据库为mysql，使用之前看readme.txt。javascript与jquery混用。无刷新购物车、输入提示、表格局部刷新、xml实时数据更新、划词解释。
ajax入门学习（二）小案例Demo1
冷血之心的博客
02-19 3104
   （尊重劳动成果，转载请注明出处：http://blog.csdn.net/qq_25827845/article/details/55823800冷血之心的博客） ajax入门学习（一） ajax入门学习（二）小案例Demo1 ajax入门学习（三）小案例Demo2   1、准备工作 因为AJAX也需要请求服务器，异步请求也是请求服务器，所以我们需要先写好服务器端代码，即编写...
一个完整的ajax简单案例
热门推荐
qq_37447018的博客
04-23 2万+
ajax简单完整案例
js ajax的示例代码,Javascript原生ajax请求代码实例
weixin_32357285的博客
08-05 958
这篇文章主要介绍了Javascript原生ajax请求代码实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下代码如下class Ajax{constructor(url, method, data, callback_suc, callback_err, callback_run){this.RT = true;//默认为异步请求this.url...
原生 javascript ajax 实例演示
cvper's world !
01-25 3396
（对低版本的 ie 不作兼容处理了，太过时，不知道谁还用）  本次演示采用原生javascript + php 实现ajax的  post  和  get 功能;  对php不了解的同学不用担心，就两三行代码，而且我会详细说明；  好了，下面开始：  第一步：如果想要运行起来，那么还是需要开启服务器的，这里推荐使用 wampserver，                下载相应的
基于原生JS实现仿JQ中的Ajax
T_Joe18的博客
11-12 1790
基于原生JS实现仿JQ中的Ajax
mediawiki 实现ajax请求及demo
05-21
MediaWiki 实现 AJAX 请求的步骤如下： 1. 在 `LocalSettings.php` 文件中添加以下代码开启 AJAX 支持： ```php $wgAjaxExportList = array( 'myFunction' ); $wgUseAjax = true; ``` `$wgAjaxExportList` 数组中...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值