ĐĂNG dữ liệu ở định dạng JSON

86

Tôi có một số dữ liệu cần chuyển đổi sang định dạng JSON và sau đó ĐĂNG nó bằng một hàm JavaScript.

<body onload="javascript:document.myform.submit()">
<form action="https://www.test.net/Services/RegistrationService.svc/InviteNewContact" method="post" name="myform">
  <input name="firstName" value="harry" />
  <input name="lastName" value="tester" />
  <input name="toEmail" value="testtest@test.com" />
</form>
</body>

Đây là giao diện của bài viết bây giờ. Tôi cần nó gửi các giá trị ở định dạng JSON và thực hiện ĐĂNG bằng JavaScript.

— Damjan Pavlica
nguồn

Dữ liệu JSON nên có cấu trúc nào? Chỉ là {"firstName":"harry", "lastName":"tester", "toEmail":"testtest@test.com"}?

— Gumbo

1

Có, dữ liệu sẽ ở định dạng bạn đã mô tả! cảm ơn vì những câu trả lời!

171

Không chắc bạn có muốn jQuery hay không.

var form;

form.onsubmit = function (e) {
  // stop the regular form submission
  e.preventDefault();

  // collect the form data while iterating over the inputs
  var data = {};
  for (var i = 0, ii = form.length; i < ii; ++i) {
    var input = form[i];
    if (input.name) {
      data[input.name] = input.value;
    }
  }

  // construct an HTTP request
  var xhr = new XMLHttpRequest();
  xhr.open(form.method, form.action, true);
  xhr.setRequestHeader('Content-Type', 'application/json; charset=UTF-8');

  // send the collected data as JSON
  xhr.send(JSON.stringify(data));

  xhr.onloadend = function () {
    // done
  };
};

— JK
nguồn

62

Tôi nghĩ đây là một ví dụ hay, rõ ràng, ngắn gọn về cách hoàn thành công việc trong 20 dòng mã, không cần 100K khuôn khổ.

— spidee

1

@IanKuca Cảm ơn :) Tôi đã tự hỏi liệu chúng ta có thể gửi dữ liệu json mà không cần urlencode dữ liệu không? Tôi có nghĩa là tôi muốn gửi dữ liệu thích "cmd":"<img src=0 onerror=alert(1)>"không%3Cimg+src%3D0+onerror%3Dalert%281%29%3E

— tli2020

2

@liweijian Bạn nên đi với bất kỳ JSON.stringifylợi nhuận nào.

— JK

2

@IanKuca Có vẻ như dữ liệu bài đăng đã được mã hóa bởi html formnot JSON.stringify.

— tli2020

@liweijian bạn cần phải urldecode các giá trị hình thức đầu tiên nếu đó là trường hợp

— Kevin Peno

28

Đây là một ví dụ sử dụng jQuery ...

 <head>
   <title>Test</title>
   <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
   <script type="text/javascript" src="http://www.json.org/json2.js"></script>
   <script type="text/javascript">
     $(function() {
       var frm = $(document.myform);
       var dat = JSON.stringify(frm.serializeArray());

       alert("I am about to POST this:\n\n" + dat);

       $.post(
         frm.attr("action"),
         dat,
         function(data) {
           alert("Response: " + data);
         }
       );
     });
   </script>
</head>

Hàm jQuery serializeArray tạo một đối tượng Javascript với các giá trị biểu mẫu. Sau đó, bạn có thể sử dụng JSON.stringify để chuyển đổi nó thành một chuỗi, nếu cần. Và bạn cũng có thể loại bỏ tải trọng của cơ thể.

— Josh Stodola
nguồn

2

Josh, ví dụ trên jQuery cho thấy ngược lại: Trông giống như một chuỗi truy vấn chuẩn hơn là JSON.

— Sampson

4

Các bạn đã đúng. Tôi đã cập nhật câu trả lời cho phù hợp. Cảm ơn!

— Josh Stodola

7

Đây là một ví dụ điển hình, tuy nhiên, theo tiêu đề, điều này nên được thực hiện bằng javascript, không phải thư viện javascript (như jQuery trong trường hợp này)

— Juan Carlos Alpizar Chinchilla

4

Tất nhiên, hoan nghênh bạn làm điều đó một cách khó khăn. Mọi người khác đều sử dụng jQuery.

— PaulMurrayCbr

9

Câu hỏi hỏi cách ĐĂNG dữ liệu bằng javascript chứ không phải thư viện jquery. Điều này trả lời câu hỏi sai.

— Blair Anderson,

3

Một ví dụ khác có sẵn ở đây:

Gửi một JSON đến máy chủ và lấy lại một JSON mà không cần JQuery

Tương tự như jans answer, nhưng cũng kiểm tra phản hồi của máy chủ bằng cách đặt lệnh gọi lại onreadystatechange trên XMLHttpRequest.

— andrew pate
nguồn

1

Sử dụng đối tượng FormData mới (và các nội dung khác của ES6), bạn có thể thực hiện việc này để biến toàn bộ biểu mẫu của mình thành JSON:

let data = {};
let formdata = new FormData(theform);
for (let tuple of formdata.entries()) data[tuple[0]] = tuple[1];

và sau đó xhr.send(JSON.stringify(data));giống như câu trả lời ban đầu của Jan.

— Felk
nguồn

Điều đó sẽ không hoạt động. Các đối tượng FormData không xâu chuỗi thành JSON một cách hữu ích.

— Quentin