js提交from表单 多参数

做翻页功能处理

1、 jsp 翻页

<form name="form" action="" METHOD="post">
<input type="button" value="首页"  οnclick="filter()" />
<input type="button" value="上一页" οnclick="firstfilter()" /> 
<input type="button"  value="下一页"  οnclick="lastfilter()" />
<input type="button" value="末页" οnclick="maxfilter()" />
<!-- <input type="hidden" name="resType" id="resType" value="<%=resType%>"/> -->

  </form>


2、js函数提交from表单

  <script  type="text/javascript">
function filter(){
   var url = "<%=basePath%>home/reading_book?currentpage=1&resType=<%=resType%>";
 document.form.action = url;   
   document.form.method = "post";   
   document.form.submit(); 

}
function firstfilter(){
var url ="<%=basePath%>home/reading_book?currentpage=<%=lastpage%>&resType=<%=resType%>";
document.form.action = url;   
document.form.method = "post";   
document.form.submit()
}
function lastfilter(){
  var url = "<%=basePath%>home/reading_book?currentpage=<%=nextpage%>&resType=<%=resType%>";
document.form.action = url;  
document.form.method = "post";    
document.form.submit(); 
}
function maxfilter(){
var url = "<%=basePath%>home/reading_book?currentpage=<%=max%>&resType=<%=resType%>";
 
document.form.action = url;   
document.form.method = "post";   
document.form.submit()
}
</script>


3、后台处理          如果改为get提交  下面的 resType  获取的值为NULL

 
@RequestMapping(value = "/home/reading_book", method = RequestMethod.POST)
public ModelAndView reading_bookPOST(HttpServletRequest request,
HttpServletResponse response, ModelMap modelMap) throws Exception {
      VUser user = (VUser) request.getSession().getAttribute("User");            
    i nt resType = Integer.parseInt(request.getParameter("resType"));

   int page = 1;
if (!(("").equals(request.getParameter("currentpage")))
&& !(request.getParameter("currentpage") == null)) {
page = Integer.parseInt(request.getParameter("currentpage"));
}
List data = booksheet.fetchAllSheet(-1, -1, "0", user.getU_OId(),
resType);


modelMap.put("booklist", booksheet.fetchAllSheet((page - 1) * 6, 6,
"0", user.getU_OId(), resType));
modelMap.put("currentpage", page);
modelMap.put("resType", resType);
modelMap.put("max", data.size() % 6 == 0 ? data.size() / 6 : data
.size() / 6 + 1);
return new ModelAndView("/home/reading_book", modelMap);
}


在测试的过程中,如果改为get提交,服务端接受不到提交的参数,改为Post 参数能正常接收。

在React.js和Ant Design 4.x中,表单提交可以通过使用Form组件的onFinish属性来实现。当表单中的所有表单项都通过验证时,onFinish事件会被触发,并且会将表单的值作为参数传递给事件处理函数。下面是一个简单的例子,展示了如何在React.js和Ant Design 4.x中提交表单。 首先,在你的代码中导入所需的模块: ```js import React, { useState } from 'react'; import { Form, Input, Button } from 'antd'; ``` 接下来,创建一个表单组件: ```js const MyForm = () => { // 定义表单项的值 const [form] = Form.useForm(); // 表单提交事件 const handleSubmit = (values) => { console.log('Received values of form: ', values); // 在这里可以提交表单数据到服务器 }; return ( <Form form={form} onFinish={handleSubmit}> <Form.Item label="Username" name="username" rules={[{ required: true, message: 'Please input your username!' }]}> <Input /> </Form.Item> <Form.Item label="Password" name="password" rules={[{ required: true, message: 'Please input your password!' }]}> <Input.Password /> </Form.Item> <Form.Item> <Button type="primary" htmlType="submit"> Submit </Button> </Form.Item> </Form> ); }; ``` 在这个例子中,我们使用了Ant Design的Form、Input和Button组件来创建表单。在表单中,我们定义了一个onFinish事件处理函数handleSubmit,当表单中的所有表单项都通过验证时,该事件会被触发。在事件处理函数中,我们可以获取到表单的值,并将其提交到服务器。 最后,我们将表单组件渲染到页面中: ```js ReactDOM.render(<MyForm />, document.getElementById('root')); ``` 这是一个简单的例子,你可以根据自己的需求来添加更多的表单项和验证规则。希望对你有帮助!
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值