Rumah >pembangunan bahagian belakang >tutorial php >javascript - 如何使用原生的XMLHttpRequest对象提交表单?
HTML:
<code><form id="info"> <label for="id">ID: </label> <input type="text" name="id"> <br> <label for="user">User: </label> <input type="text" name="user" id="user"> <br> <input type="submit" name="submit" id="submit"> </form></code>
JavaScript:
<code>var submit = document.getElementById("submit"); submit.onclick = function() { var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function(){ if(xhr.state == 4) { if((xhr.status >= 200 && xhr.status </code>
form.php
<code><?php $id = $_POST['id']; $user = $_POST['user']; echo $id . $user; ?></code>
代码如上, 我想要达到的效果, 是跟在form里添加了action和method属性一样, 提交后可以自动跳转到form.pp.
但是这样提交并没有反应, 搜了一下, 全是关于jquery的. 还是不知道用ajax提交表单是怎样的格式.
HTML:
<code><form id="info"> <label for="id">ID: </label> <input type="text" name="id"> <br> <label for="user">User: </label> <input type="text" name="user" id="user"> <br> <input type="submit" name="submit" id="submit"> </form></code>
JavaScript:
<code>var submit = document.getElementById("submit"); submit.onclick = function() { var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function(){ if(xhr.state == 4) { if((xhr.status >= 200 && xhr.status </code>
form.php
<code><?php $id = $_POST['id']; $user = $_POST['user']; echo $id . $user; ?></code>
代码如上, 我想要达到的效果, 是跟在form里添加了action和method属性一样, 提交后可以自动跳转到form.pp.
但是这样提交并没有反应, 搜了一下, 全是关于jquery的. 还是不知道用ajax提交表单是怎样的格式.
试试将xhr.send(serialize(form))
改为
<code>var formData = new FormData(form); xhr.send(formData);</code>
formData是HTML5用于异步提交表单的,应该可以满足楼主的需求。
参考http://www.cnblogs.com/lhb25/...
<code>var fd = new FormData; fd.append("username",document.querySelector("#username").value); fd.append("password",document.querySelector("#password").value); ... xhr.send(fd);</code>