Cách gửi một đối tượng JSON bằng dữ liệu biểu mẫu html

128

Vì vậy, tôi đã có mẫu HTML này:

<html>
<head><title>test</title></head>
<body>
    <form action="myurl" method="POST" name="myForm">
        <p><label for="first_name">First Name:</label>
        <input type="text" name="first_name" id="fname"></p>

        <p><label for="last_name">Last Name:</label>
        <input type="text" name="last_name" id="lname"></p>

        <input value="Submit" type="submit" onclick="submitform()">
    </form>
</body>
</html>

Đó có phải là cách dễ nhất để gửi dữ liệu của biểu mẫu này dưới dạng đối tượng JSON đến máy chủ của tôi khi người dùng nhấp vào gửi?

CẬP NHẬT: Tôi đã đi xa như thế này nhưng nó dường như không hoạt động:

<script type="text/javascript">
    function submitform(){
        alert("Sending Json");
        var xhr = new XMLHttpRequest();
        xhr.open(form.method, form.action, true);
        xhr.setRequestHeader('Content-Type', 'application/json; charset=UTF-8');
        var j = {
            "first_name":"binchen",
            "last_name":"heris",
        };
        xhr.send(JSON.stringify(j));

Tôi đang làm gì sai?

— kstratis
nguồn

1

Hãy xem $.ajaxvà serializetrong API jQuery.

— Rory McCrossan

1

Nó hoàn toàn phải là một đối tượng JSON? Đối tượng nên có cấu trúc gì?

— Anthony Grist

1

@AnthonyGrist Có, nó phải là một nguyên nhân JSON được giải quyết đối với dịch vụ ReST.

— kstratis

4

Không có nghĩa là những gì làm việc có nghĩa là gì? Hãy nhớ rằng, chúng tôi không thể nhìn thấy màn hình của bạn.

— Dour High Arch

2

@ Konos5 - REST không liên quan gì đến JSON. Nó không yêu cầu dữ liệu ở bất kỳ định dạng cụ thể nào.

— danielm

135

Nhận dữ liệu biểu mẫu đầy đủ dưới dạng mảng và json xâu chuỗi nó.

var formData = JSON.stringify($("#myForm").serializeArray());

Bạn có thể sử dụng nó sau này trong ajax. Hoặc nếu bạn không sử dụng ajax; đặt nó trong textarea ẩn và chuyển đến máy chủ. Nếu dữ liệu này được truyền dưới dạng chuỗi json thông qua dữ liệu biểu mẫu thông thường thì bạn phải giải mã nó bằng json_decode . Sau đó, bạn sẽ nhận được tất cả dữ liệu trong một mảng.

$.ajax({
  type: "POST",
  url: "serverUrl",
  data: formData,
  success: function(){},
  dataType: "json",
  contentType : "application/json"
});

— SachinGutte
nguồn

4

Bạn đã gắn thẻ câu hỏi với jQuery. Vì vậy, bạn đang sử dụng nó? với $.ajaxnó thực sự dễ dàng để vượt qua dữ liệu này.

— SachinGutte

51

HTML không cung cấp cách tạo JSON từ dữ liệu biểu mẫu.

Nếu bạn thực sự muốn xử lý nó từ máy khách, thì bạn sẽ phải sử dụng JavaScript để:

thu thập dữ liệu của bạn từ biểu mẫu thông qua DOM
tổ chức nó trong một đối tượng hoặc mảng
tạo JSON với JSON.opesify
Gửi nó với XMLHttpRequest

Có lẽ bạn nên bám vào application/x-www-form-urlencodeddữ liệu và xử lý dữ liệu đó trên máy chủ thay vì JSON. Biểu mẫu của bạn không có bất kỳ hệ thống phân cấp phức tạp nào sẽ được hưởng lợi từ cấu trúc dữ liệu JSON.

Cập nhật để trả lời chính cho câu hỏi viết lại

JS của bạn không có readystatechangetrình xử lý, vì vậy bạn không làm gì với phản hồi
Bạn kích hoạt JS khi nhấp vào nút gửi mà không hủy hành vi mặc định. Trình duyệt sẽ gửi biểu mẫu (theo cách thông thường) ngay sau khi chức năng JS hoàn tất.

— Quentin
nguồn

1

OK, vậy làm cách nào để khắc phục điều này?

— kstratis

1

@Quentin: Trong trường hợp của tôi, tôi cần POST tên miền chéo mà không cần kiểm soát tên miền.

— dùng2284570

1

@ user2284570 - Nếu bạn có câu hỏi mới, hãy hỏi một câu hỏi .

— Quentin

1

Có một đề xuất để thêm enctype='application/json'vào định nghĩa biểu mẫu để tạo dữ liệu JSON w3.org/TR/html-json-forms

— EkriirkE

4

@EkriirkE - Bạn đã đọc trang đó chưa? Nó nói, trong một hộp lớn với dải nguy hiểm màu đen và màu vàng xung quanh nó Hãy coi chừng. Thông số kỹ thuật này không còn được bảo trì tích cực và Nhóm làm việc HTML không có ý định duy trì nó thêm nữa.

— Quentin

3

mã của bạn vẫn ổn nhưng không bao giờ được thực thi, vì lý do nút gửi [type = "submit"] chỉ cần thay thế bằng loại = nút

<input value="Submit" type="button" onclick="submitform()">

bên trong kịch bản của bạn; hình thức không được khai báo.

let form = document.forms[0];
xhr.open(form.method, form.action, true);

— tdjprog
nguồn

Chính xác loại = "nút" là rất quan trọng, nếu không sử dụng thì nó chuyển hướng với các thông số url.

— Rohit Parte

1

Tôi đến trễ nhưng tôi cần nói với những người cần một đối tượng, chỉ sử dụng html, có một cách. Trong một số khung công tác phía máy chủ như PHP, bạn có thể viết mã sau:

<form action="myurl" method="POST" name="myForm">
        <p><label for="first_name">First Name:</label>
        <input type="text" name="name[first]" id="fname"></p>

        <p><label for="last_name">Last Name:</label>
        <input type="text" name="name[last]" id="lname"></p>

        <input value="Submit" type="submit">
    </form>

Vì vậy, chúng ta cần thiết lập tên của đầu vào như object[property]đối với một đối tượng. Trong ví dụ trên, chúng tôi đã nhận được dữ liệu với JSON sau:

{
"name": {
  "first": "some data",
  "last": "some data"
 }
}

— orafaelreis
nguồn