使用Javascript进行form的Post

最新推荐文章于 2021-06-10 03:19:12 发布

转载最新推荐文章于 2021-06-10 03:19:12 发布 · 1.6k 阅读

文章标签：

#javascript #asp.net #web开发 #mvc #input #webform

javascript 专栏收录该内容

33 篇文章

订阅专栏

本文介绍了如何使用JavaScript控制HTML表单的提交过程，包括通过按钮触发不同URL的提交、构造动态表单等技巧。

半年来写东西写得少了也许是懒了吧.

最近彻底的投入了Web开发当中, 也是终于开始正式接触JS了.

以前大学的时候学习ASP.NET,几乎没写过JS,因为控件很好很强大,基本不需要用到JS, 即使不好实现的东西也想着办法在避免写JS代码.当时的想法是ASP.NET很好很强大, 还学什么JS.

可是自从接触了PHP,才发觉ASP.NET控件是一种很臃肿很不方便的东西. 不但为你带来不了多少便利性,反而会让人毫无Web开发的基础知识. 什么是form都搞不清楚,因为ASP.NET的WebForm都已经为你封装好了,你双击按钮后在后台自动生成的事件代码中心编写相应代码即可, 你所需要的数据都可以用形如this.txtInput.Text的语句中拿到.

这就是我认为学习ASP.NET作为Web开发入门的最大的弊端.

不过现在有了ASP.NET MVC,这种情况就有所改变了, 不使用任何控件,完全使用web tags就能进行开发,当然,在页面(View)中需要加入部分代码.

这里不谈MVC的学习, 想学MVC可以参考我一个朋友写的系列文章: 深入理解ASP.NET MVC

进入正题, 说我接触到的有关Form的submit.

<form>
    <input type="text" name="test" />
    <input type="submit" />
</form>

这件就能够提交form的数据了,如果你不希望使用按钮而是链接来提交可以在链接上加入JS代码

<form name="newform">
    <input type="text" name="test" />
    <a href="#" onclick="submitform();" />
</form>
<script type="text/javascript">
    function submitform(){
	    var thisform = document.getElementById('newform');
		thisform.submit();
	}
</script>

上面就是一个最简单的使用JS提交form的例子, 你可以在JS中加入判断来决定是否执行form的submit. 当然你也可以像我一样直接提交这个form.

不过在有些时候, 我们在提交数据的时候却无法编写一个form, 比如说当前的form是提交到"a.php", 可是你希望点击另外个submit按钮的时候是提交到"b.php". 这怎么办呢? 我们当然可以使用JS来实现.

<form action="a.php" method="get" name="newform" >
    <input type="text" name="test" />
	<input type="submit" />
	<input type="button" onclick="submitform();" />
</form>
<script type="text/javascript">
    function submitform(){
        var data = document.getElementById('test').value;

        var myForm = document.createElement("form");
        myForm.method = "post";
        myForm.action = "b.php"

        var myInput = document.createElement("input");
        myInput.setAttribute("name", "test");
        myInput.setAttribute("value", data);
        myForm.appendChild(myInput);

        document.body.appendChild(myForm);
        myForm.submit();
        document.body.removeChild(myForm);
	}
</script>

代码很简单, 用JS来构造一个form后把相应的数据组织好, 加入到body之中,submit之后再从body中移除掉这个form