html怎么获取html表单数据

html怎么获取html表单数据,第1张

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

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

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

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

1

2

3

4

5

<form action="form_actionphp" 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_actionphp" 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>

consolelog($('#bt1')val())

consolelog($('#bt2')val());

</script>

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

代码如下:

function readHTML(){

$ajax({

async:false,

url : "aahtml“,

success : function(result){

alert(result);

}

});

}

async:false,这个是做与其他的js同步的,若为true或不填将会先运行同级别的其它代码,也就是说这里的result为空,只有其它代码执行完毕后才会运行里面的东西,result才会有值,这通常不是所需要的

表达的可能不是很清楚,自己做个测试就明了了,这是介绍此属性的一个详细的例子:>

注:这是使用的jQuery

使用js的话是下面的代码

复制代码 代码如下:

var xml>

if (windowXML>

xml>

}

else { // 兼容IE6, IE5

xml>

}

xml>

if (xml>

documentgetElementById("myDiv")innerHTML = xml>

}

}

xml>

xml>

myDiv是你输出的位置,这个是定义在了页面上的一个div

>

一般可以用原生js及jQuery获取html元素的值。

1

<div id="test">数值</div>

原生js写法:

1

alert(documentgetElementById('test')innerHTML);//数值

jQuery写法:

1

alert($('#test')html());//数值

说明:

innerHTML是取元素的内部html代码,此例中即div内部的所有html代码

html()方法作用也是取dom节点的内部html内容,是jQuery中的函数方法

1、首先打开hbuilder软件,新建一个html文件,里面写入一个p标签和一个按钮标签。

2、然后在p标签的下方设置一个script标签,里面写入js胆码;先获取p标签和按钮的dom对象,然后给按钮添加一个点击事件,再点击事件爱的回调中alertp标签的text属性即可。

3、最后打开浏览器,可以看到一段文字和一个按钮,点击这个按钮。

4、就可以d出内容了。

1、浏览器打开网页,右键-》查看源代码

然后Ctrl+S保存下来

2、打开要保存的网页,直接Ctrl+S,选择“仅HTML”

以上两种方法,选择其一即可。

以上就是关于html怎么获取html表单数据全部的内容,包括:html怎么获取html表单数据、怎样读取html文件源码、怎么获取html中的参数等相关内容解答,如果想了解更多相关内容,可以关注我们,你们的支持是我们更新的动力!

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

原文地址: http://outofmemory.cn/web/9462595.html

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

发表评论

登录后才能评论

评论列表(0条)

保存