怎么写程序使提交表单后弹出框显示成功或失败，页面不跳转？

Posted 2023-03-31

<form id="form_4189" name="form_4189" class="common_form" action="" method="POST" >

<ol>
<li style=" margin-left:30px; margin-bottom:10px; margin-top:10px;">
<label for="form_4189_name">姓名：</label>
<input id="form_4189_name" class="common_form_text form_4189_name" name="name" type="text" value="" style="width:165px; height:30px; background-color:#f5f4f2; border:1px solid #e3e3e3; line-height:30px;" />
</li>
<li>
<label for="form_4189_telephone" style=" margin-left:30px;">电话：</label>
<input id="form_4189_telephone" class="common_form_text form_4189_telephone" name="telephone" type="text" value="" style="width:165px; height:30px; background-color:#f5f4f2; border:1px solid #e3e3e3; line-height:30px;" />
</li>
</ol>
<div class="common_form_btns" >
<input type="submit" class="common_form_submit" value="提交" style=" margin:10px 80px; width:40px; height:30px;">
</div>
</form>

参考技术A <form id="form_4189" name="form_4189" class="common_form" action="" method="POST" onsubmit="return false">

加上这个就可以了onsubmit="return false"追问

我的意思是表单提交后，页面不跳转，弹出框显示：“您已提交”

追答

改：

onsubmit="alert('您已提交');return false"

采纳即可

参考技术B 用ajax,ajax是局部刷新页面，不会跳转。具体如下：
<input type="button" class="common_form_submit" value="提交" style=" margin:10px 80px; width:40px; height:30px;" onclick="submit();">
function submit()
$.ajax(
type:"POST",
url:"$request.getContextPath/你跳转的名字",
data:
你需要传的参数1: XXXX,
你需要传的参数2: XXXX，
你需要传的参数3: XXXX

);

或者后台用forward，这样就不会跳转了追问

url:"$request.getContextPath/你跳转的名字",
data:
你需要传的参数1: XXXX,
你需要传的参数2: XXXX，
你需要传的参数3: XXXX

不是不让他跳转吗？为什么还要写跳转的名字
需要传的参数又是什么啊？

追答

额，笔误，比如：这个url:"$request.getContextPath/punishmentManage.do"，后面的是配置文件的中配置的名字，然后会跳到controller,需要传的参数就是，你页面需要传那些数据到后台啊

追问

用action将数据传到对应的后台了，还需要再写
url:"$request.getContextPath/你跳转的名字",
data:


使他再次传吗？

追答

不需要了~~只是用AJAX不会全部刷新页面，只是局部刷新，如果你用action传参数，那么后台就需要用forward来转发，这样就不会刷新了

本回答被提问者和网友采纳 参考技术C 你里面也没有跳转页面的代码啊

layui使用弹出层 关闭后弹层的内容又显示出来

参考技术A 1.layui的弹层插件  layer 使用 当弹层的内容很多时，可以先在页面上写好，一般是写在body里面，不要放在其他的div里面，防止弹层受到影响，使用方法：

<div id="test" style="display:none;">这里放置弹窗内容</div>

<script>

    layui.use('layer',function()

      layer.open(

          type:1,

          title: '测试',

          content: $('#test')

      );

    );

</script>

这是使用了  $  ,  前提是引入了jquery, 当然layui里面已经内置了jquery模块，只需要引入就可以  $ = layui.jquery;但是下面的问题就来了。。。

2.使用以上的方法弹出层后，点击关闭弹窗，发现弹窗的内容(原本隐藏的div)又显示在页面了。

    原因： 你可能引入了某些插件，插件需要引入jquery，而你又引用了layui的jquery,所以就冲突了

解决办法: 在插件的js里面引用layui的jquery