初始Ajax学习笔记

前端:

复制代码
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <!--引入jquery文件-->
    <script src="js/jquery-3.2.1.js" type="text/javascript"></script>
</head>
<body>
    <div style="margin:100px;height:100px">
        <input>
    </div>
    <script type="text/javascript">
    
        $("input:eq(0)").on('change',function(){
            //获取input中的值
            var a = $(this).val();
            
            var user = {"name":a,
                        "age": 18,
                        "tel": "13611111111"
            };
            //将这个值传递到java后台
            $.ajax({                                //通过jquery调用ajax方法,触发ajax请求
                url:'/web10/testAjax1',                //url表示请求会发送到哪个后端地址
                //data:'value='+a,                    //通过data封装参数
                data: user,//通过对象传参
                type:'get',                            //type表示发送到后端的请求类型:Get、Post、Put、Delete等等
                dataType:'text',                    //dataType表示服务端响应数据的类型:HTML、text、json等
                success:function(msg){                //success表示请求发送成功之后的回调函数
                                                    //msg表示服务端发送到前端的数据
                    alert(msg);
                },
                error:function(){                     //error,表示程序调用有误
                    alert('错误');
                }
            });    
        });
            
    </script>
    
</body>
</html>
复制代码

后台:

复制代码
package com.zzb.servlet;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

@WebServlet("/testAjax1")
public class TestAjax1 extends HttpServlet{

    private static final long serialVersionUID = 3377241767636882169L;

    @Override
    protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

        String name = request.getParameter("name");
        String age = request.getParameter("age");
        String tel = request.getParameter("tel");
        
        System.out.println("ajaxÇëÇóµ½´ï:"+name+":"+age+":"+tel);
        
        PrintWriter out = response.getWriter();
        
        out.write("success:"+name);
        
        out.close();
    }

    
}
复制代码


如果您觉得阅读本文对您有帮助,请点一下“推荐”按钮,您的“推荐”将是我最大的写作动力!欢迎各位转载,但是未经作者本人同意,转载文章之后必须在文章页面明显位置给出作者和原文连接,否则保留追究法律责任的权利。
posted @   君莫笑我十年游  阅读(224)  评论(1编辑  收藏  举报
编辑推荐:
· 没有源码,如何修改代码逻辑?
· 一个奇形怪状的面试题:Bean中的CHM要不要加volatile?
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· .NET Core 托管堆内存泄露/CPU异常的常见思路
阅读排行:
· DeepSeek “源神”启动!「GitHub 热点速览」
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· C# 集成 DeepSeek 模型实现 AI 私有化(本地部署与 API 调用教程)
· DeepSeek R1 简明指南:架构、训练、本地部署及硬件要求
· 2 本地部署DeepSeek模型构建本地知识库+联网搜索详细步骤
点击右上角即可分享
微信分享提示