XMLHtt prequest早报HTML表单 [英] XMLHttpRequest to Post HTML Form

问题描述

当前设置

我有一个HTML表单，像这样。

 ＆LT;形式ID =演示型行动=POST的方法=后handler.php＆GT;
   ＆LT;输入类型=文本名称=名称值=previousValue/＆GT;
   ＆LT;按钮类型=提交名称=行动值=DoSomething的＆GT;更新＆LT; /按钮＆GT;
＆LT; /形式GT;
 

我可能有很多这样的形式在页面上。

我的提问

我如何提交此表asynchrously，而不是重定向或刷新页面。我知道如何使用 XMLHtt prequest 。这个问题我已经被检索从HTML数据中的JavaScript来再放入一个POST请求字符串。这是我目前使用我的zXMLHtt prequest`的方法。

 函数getHtt prequest（）{
    VAR XMLHTTP;
    如果（window.XMLHtt prequest）{// $ C $下IE7 +，火狐，Chrome，歌剧，Safari浏览器
        XMLHTTP =新XMLHtt prequest（）;
    }其他{// code对IE6，IE5
        XMLHTTP =新的ActiveXObject（Microsoft.XMLHTTP）;
    }

    返回XMLHTTP;
}

功能demoRequest（）{
       VAR请求= getHtt prequest（）;
       request.onreadystatechange =功能（）{
             如果（request.readyState == 4和＆安培; request.status == 200）{
                   的console.log（收到响应）;
             }
       }
       request.open（POST，后handler.php，真正的）;
       request.setRequestHeader（内容型，应用程序/ x-WWW的形式urlen codeD）;
       request.send（行动= DoSomething的）;
}
 

因此​​，例如，说JavaScript方法 demoRequest（）表单的提交按钮被点击的时候叫，我怎么从这个方法访问形式值再加入它的 XMLHtt prequest ？

修改

想实现从一个答案解决下面我已经修改了我的表像这样。

 ＆LT;形式ID =演示型＆GT;
       ＆LT;输入类型=文本名称=名称值=previousValue/＆GT;
       ＆LT;按钮类型=提交名称=行动值=DoSomething的的onClick =demoRequest（）＆GT;更新＆LT; /按钮＆GT;
＆LT; /形式GT;
 

不过上点击按钮，它仍然试图重定向我（的地方我不确定），我的方法是不是叫什么名字？

按钮事件监听器

 的document.getElementById（'updateBtn'）。的addEventListener（'点击'，函数（EVT）{
                                。EVT preventDefault（）;

                                // 做一点事
                                updateProperties（）;

                                返回false;
                            }）;
 

解决方案

在POST字符串格式如下：

 的name = value＆放大器; 2 =值2和放大器; NAME3 =值3
 

所以，你必须抓住所有的名字，他们的价值观，并把它们转换为这种格式。 您可以遍历所有输入要素或致电获取特定的人的document.getElementById（）。

警告：的你必须使用<一个href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/en$c$cURIComponent"><$c$c>en$c$cURIComponent()所有的名字和特别的价值观，这样可能＆安培; 包含在字符串不破的格式

例如：

 变种输入=的document.getElementById（我的输入-ID）;
VAR inputData = EN codeURIComponent（input.value）;

request.send（行动= DoSomething的＆放大器;+ input.name +=+ inputData）;
 

---

另一种更简单的选择是使用 FORMDATA 的对象。这样的对象可以容纳名称和值对。

幸运的是，我们可以从现有的窗体构造一个 FORMDATA 的对象，我们可以直接将其发送给 XMLHtt prequest 的方法的发送（）的：

  VAR FORMDATA =新FORMDATA（的document.getElementById（我的外形ID））;
xhr.send（FORMDATA）;
 

Current Setup

I have an HTML form like so.

<form id="demo-form" action="POST" method="post-handler.php">
   <input type="text" name="name" value="previousValue"/>
   <button type="submit" name="action" value="dosomething">Update</button>
</form>

I may have many of these forms on a page.

My Question

How do I submit this form asynchrously and not get redirected or refresh the page. I know how to use XMLHttpRequest. The issue I have is retrieving the data from the HTML in javascript to then put into a post request string. Here is the method I'm currently using for my zXMLHttpRequest`'s.

function getHttpRequest() {
    var xmlhttp;
    if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp=new XMLHttpRequest();
    } else {// code for IE6, IE5
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }

    return xmlhttp;
}

function demoRequest() {
       var request = getHttpRequest();
       request.onreadystatechange=function() {
             if (request.readyState == 4 && request.status == 200) {
                   console.log("Response Received");
             }
       }
       request.open("POST","post-handler.php",true);
       request.setRequestHeader("Content-type","application/x-www-form-urlencoded");
       request.send("action=dosomething");
}

So for example, say the javascript method demoRequest() was called when the form's submit button was clicked, how do I access the forms values from this method to then add it to the XMLHttpRequest?

EDIT

Trying to implement a solution from an answer below I have modified my form like so.

<form id="demo-form">
       <input type="text" name="name" value="previousValue"/>
       <button type="submit" name="action" value="dosomething" onClick="demoRequest()">Update</button>
</form>

However on clicking the button it's still trying to redirect me (to where I'm unsure) and my method isn't called?

Button Event Listener

document.getElementById('updateBtn').addEventListener('click', function (evt) {
                                evt.preventDefault();

                                // Do something
                                updateProperties();

                                return false;
                            });

解决方案

The POST string format is the following:

name=value&name2=value2&name3=value3

So you have to grab all names, their values and put them into that format. You can either iterate all input elements or get specific ones by calling document.getElementById().

Warning: You have to use encodeURIComponent() for all names and especially for the values so that possible & contained in the strings do not break the format.

Example:

var input = document.getElementById("my-input-id");
var inputData = encodeURIComponent(input.value);

request.send("action=dosomething&" + input.name + "=" + inputData);

---

Another far simpler option would be to use FormData objects. Such an object can hold name and value pairs.

Luckily, we can construct a FormData object from an existing form and we can send it it directly to XMLHttpRequest's method send():

var formData = new FormData( document.getElementById("my-form-id") );
xhr.send(formData);

这篇关于XMLHtt prequest早报HTML表单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！