ajax结合jquery发送post请求并且将返回值显示在页面上

最新推荐文章于 2024-11-26 09:36:11 发布

原创最新推荐文章于 2024-11-26 09:36:11 发布 · 868 阅读

2 ·

CC 4.0 BY-SA版权

bootstrap 同时被 2 个专栏收录

4 篇文章

订阅专栏

ajax&jquey

1 篇文章

订阅专栏

本文介绍如何利用jQuery的AJAX方法发送POST请求，并将服务器返回的JSON数据展示在网页上。同时，文章提及了在处理过程中遇到的后台报错问题，即服务器无法识别JSON对象的字段。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

springboot： Content type 'application/x-www-form-urlencoded;charset=UTF-8' not supported

 <script type="text/javascript">
        $(document).ready(function(){
            $("button").click(function(){
                $.ajax({
                    url:"/sys-role/getSysRoleList/1/10",
                    type:"post",
                    data:{"id":"10"},
                    headers : {
                        'Content-Type' : 'application/json;charset=utf-8'
                    },
                    dataType:"json",
                    error:function(){alert("出错啦")},
                    success:function(data){
                        alert("成功");

07:53:19.764 [http-nio-8085-exec-2] WARN  org.springframework.web.servlet.mvc.support.DefaultHandlerExceptionResolver - Resolved [org.springframework.http.converter.HttpMessageNotReadableException: JSON parse error: Unrecognized token 'id': was expecting (JSON String, Number, Array, Object or token 'null', 'true' or 'false'); nested exception is com.fasterxml.jackson.core.JsonParseException: Unrecognized token 'id': was expecting (JSON String, Number, Array, Object or token 'null', 'true' or 'false')

后台报错，不认识json中的字段


1. var titleId = "jj";
        var id = "3145347c-7e8c-4d83-bd7c-f0515e9f8690";
        var seriesId = "jjj";
        JsonData = {
            titleId: titleId,
            id: id,
            seriesId: seriesId
        }
 data:JSON.stringify(JsonData),
complete: function (data) {
                        debugger;
                        alert("完成！");
                        document.getElementById("ajaxTest").innerHTML=data.responseText;
                        console.log(data.responseText);
                        console.log(document.getElementById("ajaxTest"));
                    },// 类型：function  请求完成后调用此函数 （请求成功或失败之后均调用）


2.
@Mapper
public interface SysRoleMapper extends BaseMapper<SysRole> {

    IPage<SysRole> getSysRoleList(IPage<SysRole> page,@Param("sysRole") SysRole sysRole);

    <select id="getSysRoleList" resultType="com.lixiaowu.property.system.entity.SysRole">
        select
        <include refid="Base_Column_List" />
        from sys_role
        where 1 = 1
        <if test="sysRole.Id != null">
            and  Id = #{sysRole.Id}
        </if>
        <if test="sysRole.RoleCode != null">
          and  RoleCode = #{sysRole.RoleCode}
        </if>
        <if test="sysRole.RoleName != null">
            and   RoleName = #{sysRole.RoleName}
        </if>
        <if test="sysRole.Remark != null">
            and   Remark = #{sysRole.Remark}
        </if>

        <if test="sysRole.AddTime != null">
            and   AddTime = #{sysRole.AddTime}
        </if>
        <if test="sysRole.AddUser != null">
            and  AddUser = #{AddUser}
        </if>
        <if test="sysRole.ModifyTime != null">
            and  ModifyTime = #{sysRole.ModifyTime}
        </if>
        <if test="sysRole.ModifyUser != null">
            and ModifyUser = #{sysRole.ModifyUser}
        </if>
        <if test="sysRole.Buildin != null">
            and  Buildin = #{sysRole.Buildin}
        </if>
    </select>

2
.=
在这里插入图片描述

完整html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="../../favicon.ico">

    <title>登录页</title>
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

    <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <script src="./system/js/jquery-3.5.1.js"></script>
    <script src="./js/jquery-3.5.1.min.js"></script>

    <!--    <script type="text/javascript">-->
    <!--        function loadXMLDoc()-->
    <!--        {-->
    <!--            var xmlhttp;-->
    <!--            if (window.XMLHttpRequest)-->
    <!--            {// code for IE7+, Firefox, Chrome, Opera, Safari-->
    <!--                xmlhttp=new XMLHttpRequest();-->
    <!--            }-->
    <!--            else-->
    <!--            {// code for IE6, IE5-->
    <!--                xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");-->
    <!--            }-->
    <!--            xmlhttp.onreadystatechange=function()-->
    <!--            {-->
    <!--                if (xmlhttp.readyState==4 && xmlhttp.status==200)-->
    <!--                {-->
    <!--                    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;-->
    <!--                }-->
    <!--            }-->
    <!--            xmlhttp.open("GET","/sys-user/getSysUserList?pageIndex=0&pageSize=10",true);-->
    <!--            xmlhttp.send();-->
    <!--        }-->

    <!--    </script>-->

    <script type="text/javascript">
        var titleId = "jj";
        var id = "3145347c-7e8c-4d83-bd7c-f0515e9f8690";
        var seriesId = "jjj";
        JsonData = {
            titleId: titleId,
            id: id,
            seriesId: seriesId
        }
        var pageTotal = 0;
        $(document).ready(function () {
            $("button").click(function () {
                $.ajax({

                    url: "/sys-role/getSysRoleList/1/10",
                    type: "post",
                    data: JSON.stringify(JsonData),
                    headers: {
                        'Content-Type': 'application/json;charset=utf-8'
                    },
                    dataType: "application/json",
                    // error:function(){
                    //     pageTotal = data.pageIndex;
                    //     alert(pageTotal)
                    // },
                    //
                    // success : function(data) {
                    //     pageTotal = data.pageIndex;
                    //     alert(pageTotal)
                    // },
                    error: function (data) {
                        alert("失败！")
                        alert(data);
                    },   // 类型 function  请求失败时调用的此函数
                    success: function (data) {
                        debugger;
                        alert("完成！")
                        document.getElementById("ajaxTest").innerHTML = data.responseText;
                        console.log(data.responseText);
                        console.log(document.getElementById("ajaxTest"));

                    }, // 类型：function 请求成功时调用的此函数
                    complete: function (data) {
                        debugger;
                        alert("完成！");
                        document.getElementById("ajaxTest").innerHTML = data.responseText;
                        console.log(data.responseText);
                        console.log(document.getElementById("ajaxTest"));
                    },// 类型：function  请求完成后调用此函数 （请求成功或失败之后均调用）

                });
                return pageTotal;
            });
        });
    </script>


</head>

<body>

<div class="container">

    <form class="form-signin" id="login-info">
        <h2 class="form-signin-heading">请登录：</h2>
        <input type="text" id="inputName" class="form-control" placeholder="账号：" required autofocus>
        <label for="inputPassword" class="sr-only">Password</label>
        <input type="password" id="inputPassword" class="form-control" placeholder="请输入密码：" required>
        <div class="checkbox">
            <label>
                <input type="checkbox" value="remember-me"> Remember me
            </label>
        </div>
        <button class="btn btn-lg btn-primary btn-block" type="submit" onclick="submit1()">登录</button>
    </form>

</div>


<h2>AJAX</h2>
<button type="button" onclick="loadXMLDoc()">请求数据</button>
<div id="myDiv"></div>
<div id="ajaxTest"></div>

    <button>向页面发送 HTTP POST 请求，并获得返回的结果</button>

</body>
</html>