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

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了怎么写程序使提交表单后弹出框显示成功或失败,页面不跳转?相关的知识,希望对你有一定的参考价值。

<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

以上是关于怎么写程序使提交表单后弹出框显示成功或失败,页面不跳转?的主要内容,如果未能解决你的问题,请参考以下文章

JS 弹出框 确定后 转到另外一个页面

javascript写一个表单验证,姓名和手机号码不能为空及有效性,验证通过提交后弹出窗口提示的:提交成功

★在asp中,点击按钮后弹出对话框,怎么做?★

layui列表点击添加/编辑弹出框,ajax执行完毕layer.msg不执行回调的问题

java swing Jpanel 怎么添加一个Jdialog弹出框

iOS 类似复制链接打开淘宝APP后弹出页面功能