当前位置:首页 » 《随便一记》 » 正文

(十)ajax异步刷新问题(input和button)_我实在是想不出什么好听的昵称了啊的博客

8 人参与  2022年02月27日 12:34  分类 : 《随便一记》  评论

点击全文阅读


背景

在学校安排的实习项目中,尽管我是走的后端方向,但是难免会碰到很多前端知识,且这也是我们后端需要掌握的一些,我想,有能力的话,尽量往全栈走,这样选择性会多点。好啦,言归正传。
我大致描述一下问题:
在设计一个表单的时候,里面还有多个发送验证码,上传附件等组合场景。我的设计是,只用一个form作为一个表单,在填写完所有信息后再统一提交保存到数据库,而发送验证码使用ajax异步实现。(这是课题老师要求的,我只好跟着做)。由于自己对前端知识的匮乏,所以才遇到了这个问题:

  • 在点击发送手机验证码时候,我使用的是button:
    具体如下:
 <form class="la" id="sent" action="/codeSent" method="POST" enctype="multipart/form-data">
...
		<label class="code_container">
            <span class="code_label">验证码</span>
            <input type="text" id="code" class="code" placeholder="请输入手机验证码">
            <input type="button" onclick="sub()" value="发送验证码">
        </label>
       ...
 </form>
  • 对应的ajax:
<script th:inline="javascript">
    function sub() {
        $.ajax({
            url: "/code", 
            type: "POST",  
            data: { "spareContactsName": $("#spareContactsName").val(),"spareContactsPhoneNumber":$("#spareContactsPhoneNumber").val()},  /*提交的数据(json格式),从输入框中获取*/
            dataType:'json',
            cache:false,
            success:function (res)
            {
               alert(res.msg);
            }

        });
    }
</script>
  • 错误信息如下:
    在这里插入图片描述
  • 打开调试器查看:可看到跳转的地址是form的action地址而不是ajax中的url。
    在这里插入图片描述
  • 原因分析:我想的是button 存在时会提交表单,当点击发送按钮时候,页面就被刷新,因此走的是form中的action地址。
  • 解决办法:要想点击按钮提交,我还可以使用input的type设置:具体如下:
<input type="button" onclick="sub()" value="发送验证码">
  • 结果如下:地址跳转正确,且ajax能异步获取后台传回的数据。
    在这里插入图片描述好啦,今天的分享就到此结束啦!后端的童鞋也要学好部分前端知识哦,尽量往全栈走哦!

点击全文阅读


本文链接:http://zhangshiyu.com/post/35472.html

验证码  的是  发送  
<< 上一篇 下一篇 >>

  • 评论(0)
  • 赞助本站

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

最新文章

  • 夫君立筷子定我灾星罪名,我改嫁冷宫皇子后他追悔莫及好评_赵荀孟如安青瑶精心编著_小说后续在线阅读_无删减免费完结_
  • 邻居低素质,而我没素质独家番外_老太太赖皮欣欣超长版_小说后续在线阅读_无删减免费完结_
  • 重生后我转嫁首富瘸腿独子,总裁前夫却疯了一口气看完_妹妹傅云琛沈明辉独家番外_小说后续在线阅读_无删减免费完结_
  • 我拒绝给系花捐款后,全系同学悔疯了在线阅读_小说后续在线阅读_无删减免费完结_
  • 我让位给女友的透视眼竹马,他却说如果能重生再也不来了。虐心反转_玉石林若女友推荐_小说后续在线阅读_无删减免费完结_
  • 相国独子的丫鬟砸坏我的玉佩后,我当场拒婚阅读_玉佩陈郡谢氏全新_小说后续在线阅读_无删减免费完结_
  • 手术时,我看着病人惨死最新试读_淼淼陆知衍姜颜全本完结_小说后续在线阅读_无删减免费完结_
  • 男友霸道给我开黑卡,转头却骂我是捞女最新章节_肖年顾客黑卡热文_小说后续在线阅读_无删减免费完结_
  • 他在回忆尽头全集_贺南舟许清梨叶絮完结txt_小说后续在线阅读_无删减免费完结_
  • 旅游结婚那天未婚夫另娶女秘书,我让他们一无所有连载_老公迎宾超长版_小说后续在线阅读_无删减免费完结_
  • 完结文异界修仙我的直播间能打赏核弹列表_完结文异界修仙我的直播间能打赏核弹(江流年沈红菱)
  • 全书浏览陪弟弟混骑行圈,离婚你哭什么?(韩星河柳千雪)_陪弟弟混骑行圈,离婚你哭什么?(韩星河柳千雪)全书结局

    关于我们 | 我要投稿 | 免责申明

    Copyright © 2020-2022 ZhangShiYu.com Rights Reserved.豫ICP备2022013469号-1