项目中,我们一般都是写上隐藏的form标签,用<a href="#" onclick="..."/>来调用js函数,给form中表单要提交的内容赋值,然后submit提交。如果页面没有隐藏的form,我们可以用JavaScript动态生成Form提交,或者只有一个隐藏form,动态生成要传递的参数。
function post(url, params) {
var tempForm = document.createElement("form");
tempForm.action = url;
tempForm.method = "post";
tempForm.style.display = "none";
for (var x in params) {
var opt = document.createElement("textarea");
opt.name = x;
opt.value = params[x];
// alert(opt.name)
tempForm.appendChild(opt);
}
document.body.appendChild(tempForm);
tempForm.submit();
return tempForm;
}
//调用方法
post('login.do', {username : xxxx, password : yyyy});
function postParamAndOpenWindow(urlAndQuery){
// 分割url和请求参数
var pos = urlAndQuery.indexOf('?')
var url = urlAndQuery.substring(0, pos);
var query = urlAndQuery.substring(pos + 1);
// 动态建立Form中的数据
var tempForm = document.getElementById('tmpForm');
tempForm.action = url;
tempForm.method = "post";
var pairs = query.split("&");
for(var i = 0; i < pairs.length; i++) {
var pos = pairs[i].indexOf('=');
if (pos == -1) continue;
var argname = pairs[i].substring(0, pos);
var value = pairs[i].substring(pos + 1);
var opt = document.createElement("textarea");
opt.name = argname;
opt.value = value;
tempForm.appendChild(opt);
}
tempForm.submitBtn.click();
return tempForm;
}
//在页面处
<a href="#" onclick="postParamAndOpenWindow("http://www.xxx.com/login?username=xxx&password=yyy');">
分享到:
相关推荐
本文实例讲述了JavaScript动态创建form表单并提交的实现方法。分享给大家供大家参考,具体如下: 页面布局有些复杂的情况下,可能需要在页面中动态创建一个 form,JavaScript 创建 form 演示如下: // JavaScript ...
在前端开发中,动态生成表单是一个常见的需求,特别是在数据录入、编辑或验证场景下。本教程将聚焦于如何利用jQuery和layui库来实现这样的功能。jQuery是一个强大的JavaScript库,它简化了DOM操作,事件处理,动画...
首先,让我们理解一下JavaScript动态生成form的基本步骤: 1. 创建form元素: ```javascript var tempForm = document.createElement("form"); ``` 这行代码创建了一个新的`<form>`元素。我们可以为form设置...
本篇文章将深入探讨如何利用jQuery从JSON对象转换为form提交数据。 首先,JSON(JavaScript Object Notation)是一种轻量级的数据交换格式,它基于JavaScript的一个子集,易于人阅读和编写,同时也易于机器解析和...
自动化生成form表单的优势:** - **提高效率**:开发者无需手动编写每个表单控件,节省时间。 - **减少错误**:自动化的工具通常会遵循最佳实践,减少编码错误。 - **适应性**:可以根据需求动态生成不同结构的表单...
"根据配置动态生成有验证的表单"这一技术主题,结合使用了iview框架和async-validator库,旨在创建灵活、可配置的表单验证解决方案。 **1. iview框架** iview是一个基于Vue.js的UI组件库,提供了丰富的前端组件,...
2. **JavaScript动态修改Action属性**:通过JavaScript可以动态修改表单的`action`属性,从而改变表单提交的目标。这里的`FormSubmit`函数实现了这一功能。 ```javascript function FormSubmit() { document....
总之,`jxl`和`jQuery.form`分别是Java和前端JavaScript领域处理Excel数据和表单提交的强大工具。它们一起工作,可以构建出高效、用户友好的数据处理应用。理解并熟练运用这两个技术,能让你在IT领域中更好地应对...
在本文中,我们将探讨如何使用 Vue 动态生成具有数据收集、校验和提交功能的表单。`form-create` 是一个非常实用的库,它允许开发者根据规则动态创建复杂的表单,包括复选框、单选框、输入框、下拉选择框、省市区三...
3. **事件处理**: JavaScript允许添加事件监听器到表单元素,例如点击、提交等,从而实现更复杂的功能,如表单验证、动态加载内容等。 4. **代码生成**: 设计完成后,生成器会自动生成HTML和JavaScript代码,开发者...
在实际应用中,我们还可能涉及到表单验证、异步提交(AJAX)、动态生成表单元素等内容,这些都是构建高效、用户友好的Web表单的关键。通过不断学习和实践,你可以熟练掌握这些技能,为用户提供更优质的交互体验。
总结来说,这个示例展示了如何使用JavaScript在前端动态添加表格行,以及如何通过表单提交这些数据到服务器。虽然例子使用的是较旧的技术(如IE6和ASP),但基本的JavaScript逻辑仍然适用于现代Web开发。在现代Web...
// 原生JavaScript实现动态创建Form并提交 var dlform = document.createElement('form'); dlform.style = "display:none;"; dlform.method = 'post'; dlform.action = '../fileServlet'; dlform.target = '...
JavaScript作为客户端脚本语言,可以通过多种策略来防止用户意外或恶意地多次提交表单。以下是一些关键的知识点: 1. **禁用提交按钮**:最简单的预防方法是在用户点击提交按钮后立即将其禁用。这可以通过监听`...
在本文中,我们将探讨如何使用JavaScript(JS)动态生成表格,并将表格中的数据提交到后端服务器。动态生成表格是Web开发中常见的需求,特别是在需要用户输入数据并提交给服务器进行处理的场景中。掌握这一技能对于...
在Web开发中,尤其是使用JavaServer Pages (JSP)时,Form表单的重复提交问题是一个常见的挑战。这可能导致数据不一致性和服务器资源的浪费。本文将探讨三种防止JSP表单重复提交的方法。 首先,我们可以使用...
#### 二、JavaScript实现动态生成文本框 接下来是JavaScript部分,这部分代码负责动态生成文本框及相应的删除按钮。 ##### 2.1 添加文本框 在`additem`函数中,通过`getElementById`获取指定ID的表格,然后调用`...