如何使用javascript向服務器提交數據(post)

時間 2019-11-11

標籤如何使用 javascript 服務器提交數據 post 欄目 JavaScript 简体版

原文原文鏈接

1 引言javascript

編寫Web程序的時候，客戶端跟服務器必然有數據的傳輸，所以不少狀況下，客戶端須要向服務器提交大量的參數，包括中文和英文。這樣一來就會有下面的問題：第一，這些參數極可能在頁面的不一樣位置，例如，在不一樣的form標籤下，所以單純Html代碼很很差實現；第二，參數中含有中文，很容易引起各類各樣的編碼問題；第三，客戶端經過Get方式提交數據，編碼問題比起使用Post方式來提交數據更爲突出。html

使用JavaScript向服務器以Post的方式提交數據能夠克服以上幾個問題。java

2 技術原理web

2.1爲何用Post？瀏覽器

向服務器提交數據常見的兩種方式是Get和Post。Get方式通常會在url後面把參數帶上，如「http://127.0.0.1:8080/struts2test/database/datatest.html?id=5&name=li」。安全

使用Get方式提交數據，瀏覽器會對URL進行URL encode，而後發送給服務器，不一樣的瀏覽器可能會有不一樣的編碼方式，所以發送以前須要使用JavaScript對參數進行統一編碼，比較麻煩，本文沒有使用這種方法。服務器

對於POST方式，表單中的參數值對是經過request body發送給服務器，此時瀏覽器會根據網頁的meta標籤中的content="text/html; charset=UTF-8"中指定的編碼進行對錶單中的數據進行編碼，而後發給服務器，在服務器端的程序中咱們能夠經過request.setCharacterEncoding("charset")方式（JSP代碼）設置編碼，而後經過request.getParameter得到正確的數據。因此使用Post提交數據，編碼方式就是咱們能夠控制的了。Post表單的Html通常寫法以下：jsp

<form action="test.jsp" method="post">post

id:<input type="text" name="id"/>ui

name:<input type="text" name="name"/>

</form>

總結一下使用Post方式提交數據相對於Get方式的優勢[1]：

更加安全（數據不會出如今URL中）；

Get傳輸的數據量小，這主要是由於受URL長度限制；而Post能夠傳輸大量的數據，因此在上傳文件只能使用Post；

更少的亂碼問題。（上面提到）

2.2爲何使用JavaScript?

使用Post提交數據能夠採用純Html來實現，爲何要使用JavaScript呢？實踐證實，不少狀況下，須要提交的數據分散在網頁的各個地方，很難集中在一個Form標籤下，直接經過Html的形式來提交數據既會使Html代碼顯得凌亂，又不優雅。

JavaScript結合DOM技術能夠解決這個問題。DOM（Document Object Model)，即文本對象模型，它基於語義的邏輯結構，容許腳本訪問Web文檔的任一元素或內容。DOM不是JavaScript的一部分，而是內置在瀏覽器中的一個對象模型。[2]咱們徹底能夠採用JavaScript操做Html文檔的DOM對象，得到咱們想要上傳的數據，將其「組裝」在一個Form中，而後以Post方式提交到服務器。

2.3JavaScript+Post優勢?

具備Post方式提交數據的全部優勢；

簡化Html代碼編寫。主要的處理都在JavaScript腳本中進行；

使用JavaScript+Post方式提交數據，只須要在JavaScript腳本部分來「組裝」和發送數據，加強了程序的可擴展性和可維護性。當要提交的數據較多或數據較分散的時候，這一優點更加明顯。

3 源代碼

3.1超連接形式

作web開發的時候常常會遇到中文亂碼問題，這個問題通常是在用get方式提交數據時出現的，用post則通常能夠避免中文亂碼問題。我起初作開發的時候就遇到這種問題，因而我就想有沒有什麼辦法能在點擊某個超連接的時候將參數以post方式傳到服務器呢？答案是確定的，使用javascript就能夠完成任務。

話很少說，上代碼，這是主要的javasript代碼：

function postwith(to, p) {

var myForm = document.create_r_r_rElement_x("form");

myForm.method = "post";

myForm.action = to;

for ( var k in p) {

var myInput = document.create_r_r_rElement_x("input");

myInput.setAttribute("name", k);

myInput.setAttribute("value", p[k]);

myForm.a(myInput);

}

document.body.a(myForm);

myForm.submit();

document.body.removeChild(myForm);

}

</script>

超連接的代碼：

點擊超連接後能夠將currentPage、xisuo的值以post的形式發送到datatest.action進行處理，特別是在處理多個參數的時候顯得很是方便。
3.2按鈕形式

3.2.1 接收用戶輸入數據的頁面a.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<title>使用javascript傳遞數據</title>

function postData(){

var myForm = document.create_r_rElement("form");

myForm.method = "post";

myForm.action = "a.jsp";

var inputs=document.getElementsByName("post_data");

var i;

for (i=0;i<inputs.length;i++) {

var myInput = document.create_r_rElement("input");

myInput.type = "text";

myInput.name="post_data";

myInput.value=inputs[i].value;

myForm.a(myInput);

}

document.body.a(myForm);

myForm.submit();

document.body.removeChild(myForm);

}

</script>

</head>

<body>

</form>

</form>

</form>

</body>

</html>

a.html頁面效果如圖1。

圖1

在a.html頁面中任意輸入幾個中文，點擊任一按鈕，跳轉到a.jsp頁面，a.jsp接收用戶提交的數據並將其顯示在頁面上。

3.2.2 處理用戶輸入數據並輸出在頁面上a.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<title>得到客戶端數據</title>

</head>

<body>

//這裏設置的字符集要跟index.html中的charset一致

request.setCharacterEncoding("utf-8");

String[] text=request.getParameterValues("post_data");

for(String t : text){

out.print(t+"<br>");

}

</body>

</html>

例如用戶輸入的是「中國」「美國」「日本」三組中文，點擊任一按鈕後，跳轉到a.jsp頁面，頁面如圖2所示。

圖2

4 結束語

本文提供了一種使用JavaScript向服務器提交數據的方法。通常來說，我建議儘可能都使用Post方式來提交數據，若是數據比較少並且集中的話，可使用Form表單來提交便可。若是涉及到大量數據的提交或是數據在頁面比較分散，強烈推薦採用JavaScript來完成數據提交。

參考文獻

[1]Methods GET and POST in HTML forms - what's the difference?[Z]

http://www.cs.tut.fi/~jkorpela/forms/methods.html

[2]熊聖芬,賀智明，王俊.基於JavaScript和DOM的動態表單設計及數據提交[J].江西理工大學學報,2009,30(1):31-33.

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。