form表单的各种input的submit传值

1.       在服务器端获取参数的时候,HttpServletRequest.getParameter(String name)方法的返回结果根据如下情况区分:

1.1   请求消息中不包含这个参数,返回null

1.2   请求消息中包含这个参数,但是没有值。例如param1=&param2=123中的param1。这种情况下返回空字符串””

1.3   请求消息中包含多个命名相同的参数。例如param1=1&param1=2中的param1。这种情况下,返回第一个参数的值。例如上面的1。如果使用HttpServletRequest.getParameterValues(String name),则返回一个包含所有命名相同的值的Sring数组。

2.       <input type="submit" name=" " value=" ">

一个页面中可以有多个submit元素,点击某个submit按钮的时候,浏览器会将form的数据封转后发送给服务器,其中包括一对当前点击的submit信息的数据,为当前点击submit按钮的namevalue。其他不点击的submit按钮不传递namevalue值。

所以可以通过如下语句判断点击了那个submit按钮。

if(req.getParameter("submit按钮的name属性") != null && req.getParameter("submit按钮的name属性").equals("submit按钮的value属性"))

       {

           执行语句

    }

如果某个submit按钮没有name属性。点击这个按钮的时候,浏览器也会将form的数据封转后发送给服务器,但是不包含submit按钮本身的namevalue信息。所以服务器端不能判断是点击了哪个按钮。

3.       <input type="button" name=" " value=" ">

点击一个submit按钮的时候,浏览器会自动提交数据到服务器,但是点击一个Button的时候,浏览器只是单纯的执行这个Buttononclick事件。如果没有onclick事件,就什么也不做。可以在onclick事件中通过JavaScript代码提交表单。

例如:

function button1_click()

{

document.form1.action = “check.jsp”;

document.form1.submit();

}

点击button按钮不传递buttonnamevalue值。

4.       各种input的传递namevalue的情况:

前提是,只要没有name属性,就不传递。

texttextarea不管是否为空,都将传递到服务器,为空时传递的value值为空字符串。

checkboxradio的状况是,只有被选中的才会传递,不选择的不传递。如果选中了没有valuecheckboxradio,传递的value值默认为”on”

hidden不管如何,都会被传递给服务器。

5.       一个实践

5.1   jsp页面

<form action="<%=request.getContextPath()%>/checkboxtest"

                            method="post" target="_blank">

                            <table>

                                     <tr>

                                               <td>

                                                        <input type="checkbox" name="selectbooks" value="1">

                                               </td>

                                               <td>

                                                        1

                                               </td>

                                     </tr>

                                     <tr>

                                               <td>

                                                        <input type="checkbox" name="selectbooks" value="2">

                                               </td>

                                               <td>

                                                        2

                                               </td>

                                     </tr>

                                     <tr>

                                               <td>

                                                        <input type="checkbox" name="selectbooks" value="3">

                                               </td>

                                               <td>

                                                        3

                                               </td>

                                     </tr>

                                     <tr>

                                               <td>

                                                        <input type="submit" name="check" value="查看">

                                               </td>

                                               <td>

                                                        <input type="submit" name="delete" value="删除">

                                               </td>

                                     </tr>

                            </table>

</form>

5.2   后台Servlet代码:

                   resp.setContentType("text/html;charset=UTF-8");

                   String[] selectBooks = req.getParameterValues("selectbooks");

                   StringBuffer selectBookIds = new StringBuffer();

                   int flag = 0;

                   for (String selectbook : selectBooks) {

                            if (flag == 0) {

                                     selectBookIds.append(selectbook);

                            }

                            else

                            {

                                     selectBookIds.append("," + selectbook);

                            }                

                            flag = 1;

                   }

 

                   if(req.getParameter("check") != null)

                   {

                            resp.getWriter().println("选择的图书的id有:" + selectBookIds.toString());

                   }

                   else if(req.getParameter("delete") != null)

                   {

                            resp.getWriter().println("删除的图书的id有:" + selectBookIds.toString());

                   }

                   else

                   {

                            resp.getWriter().println("返回的图书的id有:" + selectBookIds.toString());

                   }

  • 2
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
在uni-app中,可以通过使用vuex来实现跨页面传值。vuex是一个专为Vue.js应用程序开发的状态管理模式。它可以集中管理应用程序中的所有组件的状态,并提供了一种可预测的方式来修改和获取状态。 以下是在uni-app中使用vuex实现跨页面传值的步骤: 1. 安装vuex:在uni-app项目的根目录下,打开终端并执行以下命令安装vuex: ``` npm install vuex --save ``` 2. 创建vuex store:在uni-app项目的根目录下,创建一个名为store的文件夹,在该文件夹下创建一个名为index.js的文件。在index.js中编写以下代码: ```javascript import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) const store = new Vuex.Store({ state: { formData: {} // 存储表单数据的对象 }, mutations: { setFormData(state, data) { state.formData = data } }, actions: { updateFormData({ commit }, data) { commit('setFormData', data) } }, getters: { getFormData(state) { return state.formData } } }) export default store ``` 3. 在main.js中引入vuex:在main.js中添加以下代码: ```javascript import store from './store' Vue.prototype.$store = store ``` 4. 在发送表单数据的页面中,调用vuex的action来更新表单数据: ```javascript <template> <view> <!-- 表单内容 --> <input v-model="formData.name" /> <input v-model="formData.email" /> <!-- 提交按钮 --> <button @click="submitForm">提交</button> </view> </template> <script> export default { data() { return { formData: { name: '', email: '' } } }, methods: { submitForm() { this.$store.dispatch('updateFormData', this.formData) uni.navigateTo({ url: '/pages/other-page' // 跳转到其他页面 }) } } } </script> ``` 5. 在接收表单数据的页面中,通过vuex的getter来获取表单数据: ```javascript <template> <view> <!-- 显示表单数据 --> <text>{{ formData.name }}</text> <text>{{ formData.email }}</text> </view> </template> <script> export default { computed: { formData() { return this.$store.getters.getFormData } } } </script> ``` 通过以上步骤,就可以在uni-app中实现跨页面传值了。在发送表单数据的页面中,调用vuex的action来更新表单数据;在接收表单数据的页面中,通过vuex的getter来获取表单数据。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值