ajax实现基础增加交互代码实现

最新推荐文章于 2024-01-05 13:29:13 发布

埙声

最新推荐文章于 2024-01-05 13:29:13 发布

阅读量317

点赞数 1

分类专栏： ajax 文章标签： ajax java

本文链接：https://blog.csdn.net/LieYingZhiYan/article/details/106813752

版权

ajax 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1.新建maven项目将相关包导入，结构如下：

2.建立index.jsp

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8" isELIgnored="false"%>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Insert</title>
    <script src="js/jquery.min.js"></script>
    <script src="js/YuxiSlider.jQuery.min.js"></script>
    <script src="js/jquery.validate-1.13.1.js"></script>
    <script src="js/test.js"></script>

</head>
<body>
<div>
    <h5>Insert bootstrap laybool</h5>
</div>

<div>
    <input id="name" name="name" type="text"/>//接收参数
    <input id="age" name="age" type="text">

    <button type="button" onclick="insert()">insert</button>//定义ajax请求方法

</div>

</body>
</html>

3.建立ajax与前端交互

function insert() {
    var name = $("#name").val();
    var age = $("#age").val();


    $.ajax({
        url: "insert",//controller接口
        type: "post",//数据传送方式
        data: {"name": name, "age": age},
        dataType: "text",
        success: function (data) {
            if (data == "success") {
                alert("insert success");
            } else {
                alert("failed");
            }
        },
    });
}

前后台交互结果：

ajax与后台交互：

完成数据传递，代码（包含数据库）以上传。

https://download.csdn.net/download/LieYingZhiYan/12530387

埙声

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ajax实现基础增加交互代码实现

1.新建maven项目将相关包导入，结构如下：2.建立index.jsp<%@ page language="java" import="java.util.*" pageEncoding="UTF-8" isELIgnored="false"%><html xmlns="http://www.w3.org/1999/xhtml"><head> <title>Insert</title> <script sr
复制链接

扫一扫