HTML如何接收表单提交的数据?

HTML如何接收表单提交的数据?,第1张

方法和详细的 *** 作步骤如下:

1、第一步,打开Dreamweaver编辑器,准备一个空白html文件并编写基本html结构,见下图,转到下面的步骤。

2、第二步,执行完上面的 *** 作之后,创建一个表单,在表单中设置年龄和名称这两个属性,然后创建一个提交按钮,见下图,转到下面的步骤。

3、第三步,执行完上面的 *** 作之后,在上方设置script标签并在其中创建js函数来获取表单提交,见下图,转到下面的步骤。

4、第四步,执行完上面的 *** 作之后,打开浏览器预览效果,在表单中填写内容,然后单击提交,见下图,转到下面的步骤。

5、第五步,执行完上面的 *** 作之后,js会将数据提交到指定位置,见下图。这样,就解决了这个问题了。

用ajax提交form表单,然后ajax会有一个

success:function(result){

console.dir(result)

}

其中这个result是由服务器端接受表单数据处理并做出回应的数据

html中获取表单数据的的方法一般有两种,一个是使用form表单的action属性将表单的数据提交给后台,另外一种就是使用JavaScript方法获取表单的数据,然后通过ajax传送给后台。

工具原料:编辑器、浏览器

一、使用表单的方法提交数据

1、利用form表单的action属性来获取表单的数据并提交,代码如下:

1

2

3

4

5

<form action="form_action.php" method="get">

<p>First name: <input type="text" name="fname" /></p>

<p>Last name: <input type="text" name="lname" /></p>

<input type="submit" value="Submit" />

</form>

2、以上代码中method指定提交数据的方法为get,action的值是表单数据提交的地址。

二、使用JavaScript方法来获取表单的数据的方法

1、可以使用JavaScript的选择器选择表单的元素并获取其输入的数据,代码如下:

1

2

3

4

5

6

7

8

9

<form action="form_action.php" method="get">

<p>First name: <input id="bt1" type="text" name="fname" /></p>

<p>Last name: <input id="bt2" type="text" name="lname" /></p>

<input type="submit" value="Submit" />

</form>

<script>

console.log($('#bt1').val())

console.log($('#bt2').val())

</script>

2、其中$('#bt1').val()就是获取input输入内容的值


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/zaji/6263624.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-03-19
下一篇 2023-03-19

发表评论

登录后才能评论

评论列表(0条)

保存