programming javascript

Gửi biểu mẫu POST JavaScript

Điểm cuối này được sử dụng để gửi dữ liệu gửi biểu mẫu tới HubSpot. Gửi biểu mẫu từ các nguồn bên ngoài có thể được gửi đến bất kỳ biểu mẫu HubSpot thông thường nào. Bạn có thể tìm thấy danh sách các biểu mẫu trong tài khoản của mình bằng cách điều hướng đến Tiếp thị > Thu hút khách hàng tiềm năng > Biểu mẫu

Để theo dõi chính xác các lần gửi từ biểu mẫu bên ngoài của bạn, chúng tôi khuyên bạn nên tạo biểu mẫu mới trong HubSpot để song song với biểu mẫu trang web tùy chỉnh của bạn

Nếu đang tìm kiếm điểm cuối 

//get the form from DOM [Document object model] 
    var form = document.getElementById['login-form'];
    form.onsubmit = function[event]{
        var xhr = new XMLHttpRequest[];
        var data = new FormData[form];
        //Add extra data to form before submission.
        data.append["referer","//example.com"];
        //open the request
        xhr.open['POST','//localhost:7000/tests/v1.0/form']
        //send the form data
        xhr.send[data];

        xhr.onreadystatechange = function[] {
            if [xhr.readyState == XMLHttpRequest.DONE] {
                form.reset[]; //reset form after AJAX success.
            }
        }

        //Dont submit the form.
        return false; 
    }
0 kế thừa, bạn có thể tìm thông tin chi tiết về điểm cuối đó tại đây

Trước khi bạn bắt đầu

Xin lưu ý những điều sau đây

  • Điểm cuối này có giới hạn tốc độ là 50 yêu cầu mỗi 10 giây
  • Khi sử dụng điểm cuối này để tích hợp các biểu mẫu tùy chỉnh với HubSpot, hãy nhớ rằng các điểm cuối khả dụng không ghi lại bất kỳ lệnh gọi API nào. Người dùng sẽ cần lưu trữ nhật ký của riêng họ.  
  • Ngoài việc chấp nhận các yêu cầu HTTP phía máy chủ, điểm cuối này sẽ chấp nhận các yêu cầu AJAX [CORS] có nguồn gốc chéo, cho phép bạn gửi trực tiếp dữ liệu biểu mẫu tới phía máy khách HubSpot bằng JavaScript
  • Các trường trong biểu mẫu phải tương ứng với các thuộc tính liên hệ hiện có trong tài khoản HubSpot của bạn. Tìm hiểu thêm về cách tạo thuộc tính liên hệ mới. Bạn cũng có thể xem tài liệu API Danh bạ và API Thuộc tính danh bạ để biết thêm chi tiết
  • Khi lùi ngày giá trị dấu thời gian SubmitAt của một lần gửi biểu mẫu, giá trị Nguồn gốc của người liên hệ có thể bị ảnh hưởng nếu lượt xem trang đầu tiên của người liên hệ sau giá trị dấu thời gian SubmitAt
  • Điểm cuối này không hỗ trợ reCAPTCHA. Nếu reCAPTCHA đã được bật trên biểu mẫu, nội dung gửi sẽ không được chấp nhận.  

  • Vì API này không được xác thực nên cần phải liệt kê trước các trường biểu mẫu đã gửi trong định nghĩa. Điều này có thể được cấu hình trong trình chỉnh sửa hoặc thông qua API. Không làm như vậy sẽ dẫn đến lỗi FIELD_NOT_IN_FORM_DEFINITION. Để giải quyết lỗi này, vui lòng thử cách sau.  

    Ví dụ sau minh họa một biểu mẫu HTML5 gửi dữ liệu qua lệnh gọi API Ajax bằng phương pháp 

    //get the form from DOM [Document object model] 
    var form = document.getElementById['login-form'];
    form.onsubmit = function[event]{
        var xhr = new XMLHttpRequest[];
        var data = new FormData[form];
        //Add extra data to form before submission.
        data.append["referer","//example.com"];
        //open the request
        xhr.open['POST','//localhost:7000/tests/v1.0/form']
        //send the form data
        xhr.send[data];

        xhr.onreadystatechange = function[] {
            if [xhr.readyState == XMLHttpRequest.DONE] {
                form.reset[]; //reset form after AJAX success.
            }
        }

        //Dont submit the form.
        return false; 
    }
    1. Cuộc gọi ajax sẽ được xử lý bởi tài nguyên REST được viết bằng xml

    API biểu mẫu HTML5 cung cấp một số API javascript để tránh thao tác trực tiếp với các phần tử đầu vào riêng lẻ

    Biểu mẫu HTML5 với đầu vào gửi

    Khi người dùng cuối nhập dữ liệu vào biểu mẫu và nhấp vào nút gửi, dữ liệu biểu mẫu được gửi bằng phương thức HTTP POST, hàm onsubmit dữ liệu này sẽ bắt dữ liệu và với sự trợ giúp của yêu cầu 

    //get the form from DOM [Document object model] 
    var form = document.getElementById['login-form'];
    form.onsubmit = function[event]{
        var xhr = new XMLHttpRequest[];
        var data = new FormData[form];
        //Add extra data to form before submission.
        data.append["referer","//example.com"];
        //open the request
        xhr.open['POST','//localhost:7000/tests/v1.0/form']
        //send the form data
        xhr.send[data];

        xhr.onreadystatechange = function[] {
            if [xhr.readyState == XMLHttpRequest.DONE] {
                form.reset[]; //reset form after AJAX success.
            }
        }

        //Dont submit the form.
        return false; 
    }
    2 sẽ gửi dữ liệu đến URL tương ứng

    
    
    
        Username
        
    
    
    
         
        Password

    Những điều quan trọng cần ghi nhớ ở dạng HTML5

    • Tất cả các phần tử 
      //get the form from DOM [Document object model] 
    var form = document.getElementById['login-form'];
    form.onsubmit = function[event]{
        var xhr = new XMLHttpRequest[];
        var data = new FormData[form];
        //Add extra data to form before submission.
        data.append["referer","//example.com"];
        //open the request
        xhr.open['POST','//localhost:7000/tests/v1.0/form']
        //send the form data
        xhr.send[data];

        xhr.onreadystatechange = function[] {
            if [xhr.readyState == XMLHttpRequest.DONE] {
                form.reset[]; //reset form after AJAX success.
            }
        }

        //Dont submit the form.
        return false; 
    }
      3 phải nằm trong thẻ 
      //get the form from DOM [Document object model] 
    var form = document.getElementById['login-form'];
    form.onsubmit = function[event]{
        var xhr = new XMLHttpRequest[];
        var data = new FormData[form];
        //Add extra data to form before submission.
        data.append["referer","//example.com"];
        //open the request
        xhr.open['POST','//localhost:7000/tests/v1.0/form']
        //send the form data
        xhr.send[data];

        xhr.onreadystatechange = function[] {
            if [xhr.readyState == XMLHttpRequest.DONE] {
                form.reset[]; //reset form after AJAX success.
            }
        }

        //Dont submit the form.
        return false; 
    }
      4
    • Không cần thuộc tính hành động hoặc phương thức. 
      //get the form from DOM [Document object model] 
    var form = document.getElementById['login-form'];
    form.onsubmit = function[event]{
        var xhr = new XMLHttpRequest[];
        var data = new FormData[form];
        //Add extra data to form before submission.
        data.append["referer","//example.com"];
        //open the request
        xhr.open['POST','//localhost:7000/tests/v1.0/form']
        //send the form data
        xhr.send[data];

        xhr.onreadystatechange = function[] {
            if [xhr.readyState == XMLHttpRequest.DONE] {
                form.reset[]; //reset form after AJAX success.
            }
        }

        //Dont submit the form.
        return false; 
    }
      5 hoặc 
      //get the form from DOM [Document object model] 
    var form = document.getElementById['login-form'];
    form.onsubmit = function[event]{
        var xhr = new XMLHttpRequest[];
        var data = new FormData[form];
        //Add extra data to form before submission.
        data.append["referer","//example.com"];
        //open the request
        xhr.open['POST','//localhost:7000/tests/v1.0/form']
        //send the form data
        xhr.send[data];

        xhr.onreadystatechange = function[] {
            if [xhr.readyState == XMLHttpRequest.DONE] {
                form.reset[]; //reset form after AJAX success.
            }
        }

        //Dont submit the form.
        return false; 
    }
      0
    • Tiếp tục gửi đầu vào ở dạng 
      //get the form from DOM [Document object model] 
    var form = document.getElementById['login-form'];
    form.onsubmit = function[event]{
        var xhr = new XMLHttpRequest[];
        var data = new FormData[form];
        //Add extra data to form before submission.
        data.append["referer","//example.com"];
        //open the request
        xhr.open['POST','//localhost:7000/tests/v1.0/form']
        //send the form data
        xhr.send[data];

        xhr.onreadystatechange = function[] {
            if [xhr.readyState == XMLHttpRequest.DONE] {
                form.reset[]; //reset form after AJAX success.
            }
        }

        //Dont submit the form.
        return false; 
    }
      1

    Biểu mẫu có thể được trang trí bằng CSS và điều này không ảnh hưởng đến chức năng. API javascript sẽ không hoạt động nếu những thứ trên không được giữ ở dạng

    Biểu mẫu Javascript Ajax Gửi

    Tất cả các trường nhập bao gồm các trường ẩn sẽ được gửi trên máy chủ mà không cần thêm bất kỳ javascript nào. Điều này là nhờ API FormData

    Truyền đối tượng biểu mẫu cho hàm tạo FormData để điền vào đối tượng biểu mẫu

    Đối tượng FormData chứa tất cả các trường dưới dạng thuộc tính 

    //get the form from DOM [Document object model] 
    var form = document.getElementById['login-form'];
    form.onsubmit = function[event]{
        var xhr = new XMLHttpRequest[];
        var data = new FormData[form];
        //Add extra data to form before submission.
        data.append["referer","//example.com"];
        //open the request
        xhr.open['POST','//localhost:7000/tests/v1.0/form']
        //send the form data
        xhr.send[data];

        xhr.onreadystatechange = function[] {
            if [xhr.readyState == XMLHttpRequest.DONE] {
                form.reset[]; //reset form after AJAX success.
            }
        }

        //Dont submit the form.
        return false; 
    }
    2 của trường đầu vào 
    //get the form from DOM [Document object model] 
    var form = document.getElementById['login-form'];
    form.onsubmit = function[event]{
        var xhr = new XMLHttpRequest[];
        var data = new FormData[form];
        //Add extra data to form before submission.
        data.append["referer","//example.com"];
        //open the request
        xhr.open['POST','//localhost:7000/tests/v1.0/form']
        //send the form data
        xhr.send[data];

        xhr.onreadystatechange = function[] {
            if [xhr.readyState == XMLHttpRequest.DONE] {
                form.reset[]; //reset form after AJAX success.
            }
        }

        //Dont submit the form.
        return false; 
    }
    3, Sử dụng FormData. get[] API, mỗi giá trị biểu mẫu có thể được tìm nạp

    //get the form from DOM [Document object model] 
    var form = document.getElementById['login-form'];
    form.onsubmit = function[event]{
        var xhr = new XMLHttpRequest[];
        var data = new FormData[form];
        //Add extra data to form before submission.
        data.append["referer","//example.com"];
        //open the request
        xhr.open['POST','//localhost:7000/tests/v1.0/form']
        //send the form data
        xhr.send[data];

        xhr.onreadystatechange = function[] {
            if [xhr.readyState == XMLHttpRequest.DONE] {
                form.reset[]; //reset form after AJAX success.
            }
        }

        //Dont submit the form.
        return false; 
    }

    Nếu các tham số bổ sung cần được gửi trong biểu mẫu, chúng có thể được thêm vào đối tượng FormData

    Đừng quên dòng cuối cùng. Hàm onsubmit phải luôn trả về false, cho biết API Biểu mẫu HTML5 rằng biểu mẫu đó không được gửi

    Gửi dữ liệu biểu mẫu ở định dạng json

    Đối tượng FormData chứa các cặp khóa-giá trị, như chúng ta có thể thấy trong ví dụ trên. Chúng ta cần chuyển đổi các cặp khóa-giá trị này thành một đối tượng

    đối tượng. Phương thức fromEntries[] chuyển đổi danh sách các cặp khóa-giá trị thành một đối tượng

    xhr.setRequestHeader["Content-Type", "application/json;charset=UTF-8"];
var json = JSON.stringify[Object.fromEntries[formData]];
xhr.send[json];

    Chúng tôi không thể trực tiếp gửi đối tượng qua mạng. Đối tượng cần được chuyển đổi thành chuỗi json và gửi bằng phương thức 

    //get the form from DOM [Document object model] 
    var form = document.getElementById['login-form'];
    form.onsubmit = function[event]{
        var xhr = new XMLHttpRequest[];
        var data = new FormData[form];
        //Add extra data to form before submission.
        data.append["referer","//example.com"];
        //open the request
        xhr.open['POST','//localhost:7000/tests/v1.0/form']
        //send the form data
        xhr.send[data];

        xhr.onreadystatechange = function[] {
            if [xhr.readyState == XMLHttpRequest.DONE] {
                form.reset[]; //reset form after AJAX success.
            }
        }

        //Dont submit the form.
        return false; 
    }
    2

    Điều quan trọng là phải cho máy chủ biết, chúng tôi đang gửi dữ liệu ở định dạng json bằng tiêu đề 

    //get the form from DOM [Document object model] 
    var form = document.getElementById['login-form'];
    form.onsubmit = function[event]{
        var xhr = new XMLHttpRequest[];
        var data = new FormData[form];
        //Add extra data to form before submission.
        data.append["referer","//example.com"];
        //open the request
        xhr.open['POST','//localhost:7000/tests/v1.0/form']
        //send the form data
        xhr.send[data];

        xhr.onreadystatechange = function[] {
            if [xhr.readyState == XMLHttpRequest.DONE] {
                form.reset[]; //reset form after AJAX success.
            }
        }

        //Dont submit the form.
        return false; 
    }
    5

    Xử lý AJAX Gửi phản hồi trong javascript

    Sau khi gửi thao tác, chúng tôi có thể đợi phản hồi và đặt lại biểu mẫu sau khi nhận được phản hồi thành công. Chúng tôi có thể làm các hoạt động khác như

    • Hiển thị thông báo thành công cho người dùng
    • Chuyển hướng đến trang khác
    • Xóa phần tử HTML5 khỏi trang
    • Đặt lại biểu mẫu
    ________số 8

    Gửi biểu mẫu có tìm nạp

    Tìm nạp là một API trình duyệt cho phép gửi các yêu cầu HTTP. Trong ví dụ dưới đây, chúng tôi đã thay thế XHR bằng tìm nạp

    var form = document.querySelector['form'];
form.onsubmit = function[event]{
    var formData = new FormData[form];

    fetch["/test.php",
    {
       body: formData,
       method: "post"
    }].then[];

    //Dont submit the form.
    return false; 
}

    Trên mạng

    Định dạng dữ liệu biểu mẫu để gửi dữ liệu qua mạng đến máy chủ

    Các tham số được gửi trong yêu cầu POST được nhận trên máy chủ. Các tham số trên máy chủ có thể được truy cập bằng cách sử dụng giá trị thuộc tính tên được cung cấp trong biểu mẫu

    Làm cách nào để gửi yêu cầu POST từ JavaScript?

    Làm cách nào để ĐĂNG yêu cầu bằng cách sử dụng XMLHttpRequest trong JavaScript? . create the object by calling new XMLHttpRequest[] and then use the open[] and send[] methods of XMLHttpRequest.

    Làm cách nào để gửi biểu mẫu trong JavaScript?

    hình thức phương pháp. submit[] được sử dụng để tạo động và gửi thông tin chi tiết đến máy chủ. Việc gửi biểu mẫu JavaScript có thể được sử dụng để tạo đối tượng và các thuộc tính khác nhau cũng có thể được sử dụng. Các thuộc tính có thể là lớp, id, thẻ, v.v.

    Làm cách nào tôi có thể gửi dữ liệu biểu mẫu trong yêu cầu POST?

    Để đăng dữ liệu biểu mẫu HTML lên máy chủ ở định dạng được mã hóa URL, bạn cần phải thực hiện yêu cầu HTTP POST tới máy chủ và cung cấp dữ liệu biểu mẫu HTML trong phần thân của . Bạn cũng cần chỉ định loại dữ liệu bằng cách sử dụng Content-Type. tiêu đề yêu cầu ứng dụng/x-www-form-urlencoded. . You also need to specify the data type using the Content-Type: application/x-www-form-urlencoded request header.

    Làm cách nào để nhận dữ liệu biểu mẫu đã gửi trong JavaScript?

    Để truy cập các trường biểu mẫu, bạn có thể sử dụng các phương thức DOM như getElementsByName[] , getElementById[] , querySelector[] , v.v. . Ngoài ra, bạn có thể sử dụng thuộc tính phần tử của đối tượng biểu mẫu. Hình thức. thuộc tính phần tử lưu trữ một tập hợp các phần tử biểu mẫu.

Bài Viết Liên Quan

Hướng dẫn wordpress load chậm
2024 WR Draft class
Laravel khôi phục lộ trình xóa mềm
Cài đặt bootstrap laravel 9
Làm cách nào để tăng giới hạn bộ nhớ php?
Tôi nên học node js hay python?
2023 Kia Soul problems
Phần trăm thay đổi Python
Ổ cắm Python phát hiện vây ack
Loại danh mục trăn
Toán tử kết hợp trong Python
When to apply for PGCE at UNISA for 2023?
Nút khởi động 3
Việc sử dụng danh sách seq trong Python là gì
Trộn dữ liệu trong excel
Phiên bản nào của python đi kèm với centos 8?
2023 Ford Mustang S550
Mã nguồn php crud
Biểu tượng độ c của python
Chinese horoscope horse 2023

Toplist mới

#1
Top 7 sự tích hồ gươm - ngữ văn lớp 6 2023
7 tháng trước
#2
Top 7 gdcd 6 bài 1 kết nối tri thức 2023
7 tháng trước
#3
Top 7 ý nghĩa của xây dựng gia đình văn hóa 2023
7 tháng trước
#4
Top 6 mẫu hợp đồng mượn đất làm nhà xưởng 2023
7 tháng trước
#5
Top 3 tổng tài biến thái tôi yêu anh tập 27 2023
7 tháng trước
#6
Top 6 kết thực phim mỹ nhân vô lệ 2023
7 tháng trước
#7
Top 9 trong những câu thơ sau câu nào sử dụng thành ngữ 2023
7 tháng trước
#8
Top 8 đề tài và chủ de của tác phẩm tắt đèn 2023
7 tháng trước
#9
Top 5 tiểu sử của thầy thích pháp hòa 2023
7 tháng trước

Bài mới nhất

Cách dạy con học toán lớp 1 hiệu quả năm 2024
Hàm trung bình cộng trong thư viện math.h năm 2024
Hướng dẫn tính trung bình cộng trong excel năm 2024
Cách conditonal fortmatting cho ô chứa lỗi thành màu trằng năm 2024
Khi chạy chương trình báo lỗi invalid missing system.setup năm 2024
Bài giảng sự lai hóa các obitan phân tử năm 2024

Chủ Đề

programming Hỏi Đáp Toplist Là gì Bài Tập Địa Điểm Hay Mẹo Hay Học Tốt Nghĩa của từ Công Nghệ Khỏe Đẹp bao nhiêu Top List Tiếng anh Bao nhiêu Sản phẩm tốt Xây Đựng Ngôn ngữ javascript Ở đâu Đại học Hướng dẫn Bài tập Tại sao Dịch So Sánh Máy tính Món Ngon mẹo hay Bao lâu Thế nào So sánh Khoa Học Vì sao Lớp 9 Lớp 10