Cách gửi biểu mẫu AJAX bằng JQuery – jquery gửi bài đăng biểu mẫu

Trong khi JavaScript vani tiếp tục bắt kịp JQuery về khả năng và tính nhất quán trên nhiều trình duyệt, việc xử lý các biểu mẫu gửi trong JavaScript có thể…

Bạn đang xem: jquery gửi biểu mẫu

Giới thiệu

jQuery có thể được ghép nối với việc gửi biểu mẫu để xử lý xác thực. Điều này có lợi khi cung cấp cho người dùng phản hồi về bất kỳ lỗi nào trong đầu vào của họ.

Ảnh gif mô tả người dùng điền thông tin đầu vào vào biểu mẫu và nhận được thông báo thành công.

Trong hướng dẫn này, bạn sẽ thấy một biểu mẫu mẫu giao tiếp với phần phụ trợ PHP. Biểu mẫu sẽ sử dụng jQuery để xử lý biểu mẫu mà không cần làm mới trang (sử dụng AJAX), chỉ ra bất kỳ lỗi nào và cũng hiển thị thông báo thành công.

Điều kiện tiên quyết

Để hoàn thành hướng dẫn này, bạn sẽ cần:

  • Hướng dẫn này giả định rằng bạn đã cài đặt PHP cục bộ và có thể chạy máy chủ web tích hợp sẵn . Bạn có thể tham khảo một trong những hướng dẫn của chúng tôi để cài đặt PHP trong môi trường của bạn .
  • Một số thông tin quen thuộc với các bộ chọn và phương thức từ thư viện jQuery .
  • Một số thông tin quen thuộc với các lớp từ thư viện Bootstrap .
  • Một trình soạn thảo mã.
  • Một trình duyệt web hiện đại.

Lưu ý: Hướng dẫn này không chỉ định các phiên bản mới nhất của jQuery (hiện tại là 3.5.1) hoặc Bootstrap (hiện tại là 5.0.0-beta1). Tuy nhiên, nhiều bài học trong hướng dẫn này vẫn liên quan đến các phiên bản mới nhất.

Hướng dẫn này đã được xác minh với PHP v7.3.24, jQuery v2.0.3 và Bootstrap v3.0.3.

Bước 1 – Xây dựng chương trình phụ trợ bằng PHP

Với mục đích của hướng dẫn này, phần phụ trợ sẽ được viết bằng PHP.

Đầu tiên, hãy mở cửa sổ dòng lệnh và tạo một thư mục dự án mới:

  
  1. mkdir

    jquery-form-validation

Điều hướng đến thư mục dự án mới này:

  
  1. cd

    jquery-form-validation

Sau đó, sử dụng trình chỉnh sửa mã của bạn để tạo tệp process.php mới:

process.php

  

& lt;? php

$ lỗi

=

[

]

;

$ data

=

[

]

;

nếu

(

trống

(

$ _ BÀI ĐĂNG

[

' tên '

]

)

)

{

$ lỗi

[

'name'

]

=

'Tên là bắt buộc.'

;

}

nếu

(

trống

(

$ _ BÀI ĐĂNG

[

' email '

]

)

)

{

$ lỗi

[

'email'

]

=

'Email là bắt buộc.'

;

}

nếu

(

trống

(

$ _ BÀI ĐĂNG

[

' SupermanAlias ​​'

]

)

)

{

$ error

[

'supermanAlias'

]

=

'Bí danh siêu anh hùng là bắt buộc.' < / p>

;

}

nếu

(

!

trống

(

lỗi $

)

< p class = "dấu chấm câu">)

{

$ data

[

'thành công'

]

=

sai

;

$ data

[

'lỗi'

]

=

$ lỗi

;

}

khác

{

$ data

[

'thành công'

]

=

true

;

$ data

[

'thông báo'

]

=

'Thành công!'

;

}

echo

json_encode

(

$ data

)

;

Tệp này sẽ nhận các giá trị cho name , email supermanAlias ​​. Nếu bất kỳ giá trị nào không được cung cấp, thông báo lỗi sẽ được gửi lại. Nhiều xác nhận khác có thể được thực hiện tại thời điểm này, nhưng với mục đích của hướng dẫn này, bạn sẽ chỉ đảm bảo các đầu vào bắt buộc này đã được cung cấp. Ngược lại, nếu có giá trị cho name , email supermanAlias ​​, thông báo thành công sẽ được gửi lại.

Lưu ý: Trong trường hợp thực tế, chương trình phụ trợ cũng sẽ chịu trách nhiệm cho các tác vụ khác như lấy dữ liệu và lưu các thay đổi vào cơ sở dữ liệu, tạo phiên hoặc gửi email. < / p>

Bây giờ bạn đã hoàn tất quá trình xử lý biểu mẫu, bạn có thể tạo biểu mẫu.

Bước 2 – Xây dựng Giao diện người dùng bằng HTML và CSS

Với mục đích của hướng dẫn này, Bootstrap sẽ được sử dụng để xây dựng các khung nhìn.

Trong thư mục dự án của bạn, hãy sử dụng trình chỉnh sửa mã của bạn để tạo tệp index.html :

index.html

  

& lt ;!

LOẠI TÀI LIỆU

html

& gt;

& lt;

html

& gt; < / p>

& lt;

đầu

& gt; < / p>

& lt;

title

& gt; < / p>

Ví dụ về biểu mẫu jQuery

& lt; /

tiêu đề

< p class = "dấu chấm câu"> & gt;

& lt;

liên kết

rel

=

"

biểu định kiểu

"

href

=

"

//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css

"

/ & gt;

& lt;

script

src

=

"

// ajax. googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js

"

& gt;

& lt; / < / p> script

& gt;

& lt; /

đầu

& gt;

& lt;

body

& gt; < / p>

& lt;

div

class

=

"

col-sm- 6 col-sm-offset-3

"

& gt;

& lt;

h1

& gt; < / p>

Xử lý Biểu mẫu AJAX

& lt; /

h1

& gt;

& lt;

form

hành động

=

"

process.php < p class = "dấu chấm câu"> "

phương thức

=

"

POST

"

& gt;

& lt;

div

id

=

"

tên-nhóm < p class = "dấu chấm câu"> "

class

=

"

form-group

"

& gt;

& lt;

nhãn

cho

=

"

tên

"

& gt;

Tên

& lt; /

nhãn

& gt;

& lt;

đầu vào

type

=

"

text

"

class

=

"

form-control

"

id

=

"

tên

"

name

=

"

tên

"

placeholder

=

"

Họ và tên

"

/ & gt;

& lt; /

div

& gt;

& lt;

div

id

=

"

email-group < p class = "dấu chấm câu"> "

class

=

"

form-group

"

& gt;

& lt;

nhãn

cho

=

"

email

"

& gt;

Gửi email

& lt; /

nhãn

& gt;

& lt;

đầu vào

loại

=

"

text

"

class

=

"

form-control

"

id

=

"

email

"

name

=

"

email

"

placeholder

=

"

email@example.com

"

/ & gt;

& lt; /

div

& gt;

& lt;

div

id

=

"

nhóm siêu anh hùng < p class = "dấu chấm câu"> "

class

=

"

form-group

"

& gt;

& lt;

nhãn

cho

=

"

supermanAlias ​​

"

& gt;

Bí danh siêu anh hùng

& lt; /

nhãn

& gt;

& lt;

đầu vào

type

=

"

text

"

class

=

"

form-control

"

id

=

"

siêu anh hùngAlias ​​

"

name

=

"

siêu anh hùngAlias ​​

"

placeholder

=

"

Người Kiến, Wonder Woman, Chiến binh Báo đen, Siêu nhân, Góa phụ đen

"

/ & gt;

& lt; /

div

& gt;

& lt;

nút

loại

=

"

đệ trình

"

class

=

"

btn btn-thành công

"

& gt;

Nộp

& lt; /

nút

& gt;

& lt; /

biểu mẫu

& gt;

& lt; /

div

& gt;

& lt; /

body

& gt;

& lt; /

html

& gt;

Phiên bản CDN (mạng phân phối nội dung) của Bootstrap và jQuery sẽ được tham chiếu. action của biểu mẫu sẽ được đặt thành tệp PHP đã được tạo trước đó. Biểu mẫu sẽ bao gồm các trường cho name , email supermanAlias ​​. Biểu mẫu cũng sẽ cần nút Gửi .

Mở cửa sổ đầu cuối và điều hướng đến thư mục dự án. Và chạy máy chủ PHP:

  
  1. php -S localhost: 8000

Truy cập localhost: 8000 trong trình duyệt web của bạn và quan sát những điều sau:

Ảnh chụp màn hình biểu mẫu có các trường Tên, Email và Bí danh Siêu anh hùng.

Bây giờ bạn đã hoàn thành biểu mẫu, bạn có thể tạo tập lệnh để xử lý việc gửi biểu mẫu.

Bước 3 – Xử lý Logic Gửi Biểu mẫu trong JavaScript và jQuery

Để gửi biểu mẫu qua AJAX, tập lệnh của bạn sẽ cần xử lý bốn tác vụ:

  • Chụp nút gửi biểu mẫu để hành động mặc định không diễn ra.
  • Lấy tất cả dữ liệu từ biểu mẫu bằng jQuery.
  • Gửi dữ liệu biểu mẫu bằng AJAX.
  • Hiển thị lỗi nếu có.

Trong thư mục dự án của bạn, hãy sử dụng trình chỉnh sửa mã của bạn để tạo tệp form.js mới:

form.js

  

$

(

document

)

.

sẵn sàng

(

hàm

(

)

{

$

(

"biểu mẫu"

)

.

gửi

(

chức năng

(

sự kiện

)

{

var

formData

=

{

tên

:

$

(

" # tên "

)

.

val

(

)

,

email

:

$

(

" # email "

)

.

val

(

)

,

supermanAlias ​​

:

$

(

" # siêu anh hùngAlias ​​"

)

.

val

(

)

,

}

;

$

.

ajax

(

{

loại

:

"POST"

,

url

:

"process.php"

< p class = "dấu chấm câu">,

dữ liệu

:

formData

,

dataType

:

"json"

,

mã hóa

:

true

,

}

)

.

xong

(

chức năng

(

dữ liệu

)

{

bảng điều khiển

.

nhật ký

(

data

)

;

}

)

;

sự kiện

.

PreventDefault

(

)

;

}

)

;

}

)

;

Mã này truy xuất dữ liệu từ các trường name , email supermanAlias ​​. Sau đó, nó thực hiện một yêu cầu AJAX tới process.php với một khối lượng dữ liệu biểu mẫu. Sau khi kết nối thành công, bảng điều khiển sẽ ghi dữ liệu phản hồi. event.preventDefault () được sử dụng để ngăn biểu mẫu hoạt động theo mặc định bằng cách tải lại trang khi gửi.

Sau khi lưu các thay đổi của bạn vào form.js , hãy truy cập lại tệp index.html bằng trình chỉnh sửa mã của bạn. Thêm tham chiếu vào tệp JavaScript mới:

index.html

  

& lt ;!

LOẠI TÀI LIỆU

html

& gt;

& lt;

html

& gt; < / p>

& lt;

đầu

& gt; < / p>

& lt;

title

& gt; < / p>

Ví dụ về biểu mẫu jQuery

& lt; /

tiêu đề

< p class = "dấu chấm câu"> & gt;

& lt;

script

src

=

"

form.js < p class = "dấu chấm câu"> "

& gt;

& lt; /

script

& gt; < / p>

& lt; /

đầu

& gt;

Giờ đây, khi người dùng nhấn nút Gửi trên biểu mẫu, mã JavaScript sẽ truy xuất tất cả các giá trị đầu vào và gửi yêu cầu ĐĂNG đến process.php .

Lưu ý: Bạn sẽ sử dụng lệnh gọi lại .done để xử lý yêu cầu AJAX thành công. Điều này từng được gọi là .success , nhưng từ đó không được dùng nữa trong jQuery 1.8+.

Một giải pháp thay thế khác là sử dụng serialize thay vì lấy thông tin biểu mẫu riêng lẻ.

Tập lệnh PHP sẽ xử lý các đầu vào mà lệnh gọi AJAX đã gửi và trả về mảng $ data [] đã được tạo. Bạn có thể quan sát điều này trong bảng điều khiển của trình duyệt sau khi gửi biểu mẫu:

Ảnh chụp màn hình Bảng điều khiển dành cho nhà phát triển web trong trình duyệt hiển thị dữ liệu được trả về khi gửi biểu mẫu - thành công: true, thông báo: Thành công!

Bây giờ bạn đã hoàn thành logic biểu mẫu, bạn có thể tạo tập lệnh để xử lý lỗi biểu mẫu.

Bước 4 – Hiển thị Lỗi Xác thực Biểu mẫu

Trong tập lệnh PHP, mã kiểm tra để đảm bảo rằng tất cả các trường là bắt buộc. Nếu trường không có, lỗi sẽ được gửi lại.

Truy cập lại form.js và thêm các dòng mã được đánh dấu sau:

form.js

 

    $ 

.

ajax

(

{

loại

:

"POST"

,

url

:

"process.php"

< p class = "dấu chấm câu">,

dữ liệu

:

formData

,

dataType

:

"json"

,

mã hóa

:

true

,

}

)

.

xong

(

hàm

(

dữ liệu

)

{

bảng điều khiển

.

nhật ký

(

data

)

;

nếu

(

!

dữ liệu

.

thành công

)

{

nếu

(

data

.

lỗi

.

tên

)

{

$

(

"# tên-nhóm"

)

.

addClass

(< / p>

"có lỗi"

)

;

$

(

"# tên-nhóm"

)

.

nối thêm

(< / p>

'& lt; div class = "help-block" & gt;'

+

data

.

lỗi

.

tên

+

"& lt; / div & gt ; "

)

;

}

nếu

(

data

.

lỗi

.

email

)

{

$

(

"# email-group"

)

.

addClass

(< / p>

"có lỗi"

)

;

$

(

"# email-group"

)

.

nối thêm

(< / p>

'& lt; div class = "help-block" & gt;'

+

data

.

lỗi

.

email

+

"& lt; / div & gt ; "

)

;

}

nếu

(

data

.

lỗi

.

siêu anh hùngAlias ​​

)

{

$

(

"# nhóm siêu anh hùng"

)

.

addClass

(< / p>

"có lỗi"

)

;

$

(

"# nhóm siêu anh hùng"

)

.

nối thêm

(< / p>

'& lt; div class = "help-block" & gt;'

+

data

.

lỗi

.

supermanAlias ​​

+

"& lt; / div & gt ; "

)

;

}

}

khác

{

$

(

"biểu mẫu"

)

.

html

(

'& lt; div class = "alert alert-success" & gt;'

+

data

.

tin nhắn

+

" & lt; / div & gt; "

)

;

}

}

)

;

sự kiện

.

PreventDefault

(

)

;

}

)

;

Mã này kiểm tra xem liệu phản hồi có lỗi cho từng trường hay không. Nếu có lỗi, nó sẽ thêm một lớp has-error và nối thêm thông báo lỗi.

Bây giờ, hãy truy cập lại biểu mẫu của bạn trong trình duyệt web và thử nghiệm với việc gửi dữ liệu với biểu mẫu.

Nếu có bất kỳ lỗi nào xuất phát từ máy chủ, biểu mẫu sẽ cung cấp phản hồi về bất kỳ trường nào được yêu cầu:

Ảnh chụp màn hình của biểu mẫu mô tả lỗi cho các trường nhập tên, email và bí danh siêu anh hùng.

Và nếu không có lỗi nào xuất phát từ máy chủ, biểu mẫu sẽ cung cấp phản hồi để gửi thành công:

Ảnh chụp màn hình của biểu mẫu ví dụ mô tả thông báo thành công.

Mỗi khi chúng tôi gửi biểu mẫu, các lỗi của chúng tôi từ lần gửi trước của chúng tôi vẫn còn đó. Bạn cần xóa chúng bằng cách xóa chúng ngay sau khi biểu mẫu được gửi lại.

Truy cập lại form.js và thêm các dòng mã được đánh dấu sau:

form.js

 

  

$

(

"biểu mẫu"

)

.

gửi

(

chức năng

(

sự kiện

)

{

$

(

". form-group"

)

.

removeClass

(< / p>

"có lỗi"

)

;

$

(

". help-block"

)

.

xóa

(< / p>

)

;

}

)

;

Mã này sẽ xóa lớp has-error khỏi tất cả các phần tử .form-group . Nó cũng sẽ xóa tất cả các phần tử .help-block có thông báo lỗi.

Bước 5 – Hiển thị Lỗi Kết nối Máy chủ

Nếu có lỗi khi kết nối với máy chủ, sẽ không có phản hồi JSON nào từ lệnh gọi AJAX. Để ngăn người dùng chờ đợi phản hồi mà không bao giờ đến, bạn có thể cung cấp thông báo lỗi khi kết nối không thành công.

Truy cập lại form.js và thêm các dòng mã được đánh dấu sau:

form.js

 

    $ 

.

ajax

(

{

loại

:

"POST"

,

url

:

"process.php"

< p class = "dấu chấm câu">,

dữ liệu

:

formData

,

dataType

:

"json"

,

mã hóa

:

true

,

}

)

.

xong

(

hàm

(

dữ liệu

)

{

}

)

.

fail

(

hàm

(

dữ liệu

)

{

$

(

"biểu mẫu"

)

.

html

(

'& lt; div class = "alert alert-risk" & gt; Không thể kết nối với máy chủ, vui lòng thử lại sau. & lt; / div & gt;'

)

;

}

)

;

Nếu máy chủ bị hỏng hoặc gặp sự cố vì bất kỳ lý do gì, người dùng cố gắng gửi biểu mẫu sẽ nhận được thông báo lỗi:

Ảnh chụp màn hình của biểu mẫu ví dụ mô tả thông báo lỗi không thể truy cập máy chủ.

Bây giờ bạn đã hoàn thành thông báo lỗi máy chủ, bạn đã hoàn thành biểu mẫu ví dụ.

Sử dụng $ .post thay vì $ .ajax

jQuery cũng cung cấp $ .post phương thức viết tắt thay thế cho $ .ajax .

Có thể viết lại mã $ .ajax trong form.js bằng $ .post :

  $ 

.

đăng

(

'process.php'

,

(

formData

)

{

}

)

.

fail

(

hàm

(

dữ liệu

)

{

}

)

;

Ưu điểm của $ .post là nó không yêu cầu khai báo nhiều cấu hình kết nối.

Kết luận

Trong bài viết này, bạn đã xây dựng một biểu mẫu mẫu giao tiếp với chương trình phụ trợ PHP bằng jQuery và hiển thị bất kỳ lỗi nào trong biểu mẫu.

Trong bước tiếp theo, bạn sẽ muốn khám phá các xác thực phức tạp hơn như địa chỉ email và ngày tháng hợp lệ. Bạn cũng có thể quan tâm đến việc áp dụng các xác thực phía máy khách hoạt động trong trình duyệt.

Nếu bạn muốn tìm hiểu thêm về JavaScript, hãy xem trang chủ đề JavaScript của chúng tôi để biết các bài tập và dự án lập trình.


Xem thêm những thông tin liên quan đến chủ đề jquery gửi bài đăng biểu mẫu

jquery make a post request

alt

  • Tác giả: kudvenkat
  • Ngày đăng: 2015-06-04
  • Đánh giá: 4 ⭐ ( 1880 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Link for all dot net and sql server video tutorial playlists
    https://www.youtube.com/user/kudvenkat/playlists?sort=dd&view=1

    Link for slides, code samples and text version of the video
    http://csharp-video-tutorials.blogspot.com/2015/06/jquery-make-post-request.html

    Healthy diet is very important both for the body and mind. If you like Aarvi Kitchen recipes, please support by sharing, subscribing and liking our YouTube channel. Hope you can help.
    https://www.youtube.com/channel/UC7sEwIXM_YfAMyonQCrGfWA/?sub_confirmation=1

    In this video we will discuss
    1. How to make a post request using jquery.
    2. What is the difference between get and post

    This is continuation to Part 58, please watch Part 58 before proceeding.

    To make a get request we use jquery get function. jQuery load function can be used to make either a get or post request, depending on whether the data parameter is specified or not. POST method is used if data is provided, otherwise, GET is used.

    Another method that is available in jQuery to make a post request is post method.

    jQuery post function syntax
    $.post( url [, data ] [, success ] [, dataType ] )

    Please note that the syntax of post function is similar to get function

    To modify the example we worked with in Part 58, to issue a post request simply replace get() function with post function.

    CHANGE THE FOLLOWING LINE FROM
    $.get(‘GetHelpText.aspx’, { HelpTextKey: helpDiv }, function (response) {

    TO
    $.post(‘GetHelpText.aspx’, { HelpTextKey: helpDiv }, function (response) {

    At this point if you fire fiddler and inspect the request you will find that a POST request is issued.

    What is the difference between get and post
    1. GET is designed for getting data from the server. POST is designed for modifying data on the server.

    2. Both GET and POST can be used to send data to the server.

    3. When you are sending data with a GET request, the data is appended to the URL as query strings. With POST request the data is included in the message body.

    4. There is a limit on how much data can be sent using a GET request due to the limit on the length of the data that can be passed as part of the URL. The size limitations associated with GET are different depending on the client and server software. So, If you’re sending large amounts of data, use POST over GET. If it’s just a small amount of data then you may use GET.

    5. In general, a GET request should have no side-effects, in the sense that it shouldn’t modify data. Usually if we are using a GET request to send data to the server, it should be to retrieve an item with an id. For example, GetCustomer.aspx?id=1, will retrieve a customer with id=1.

    A lot of people keep asking what is the difference between GET and POST in AJAX
    Whether you make GET and POST request using AJAX or by some other means is irrelevant, the differences are still the same.

Gửi biểu mẫu bằng jQuery [đã đóng]

  • Tác giả: qastack.vn
  • Đánh giá: 3 ⭐ ( 7891 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: [Tìm thấy giải pháp!] Nó phụ thuộc vào việc bạn gửi biểu mẫu bình thường hay thông qua cuộc gọi…

Gửi biểu mẫu HTML bằng Jquery AJAX

  • Tác giả: vi.visionaryschoolof-arts.org
  • Đánh giá: 4 ⭐ ( 6909 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Tôi đang cố gắng gửi một biểu mẫu HTML bằng AJAX bằng cách sử dụng ví dụ này. Mã HTML của tôi:

Gửi biểu mẫu AJAX bằng JQuery

  • Tác giả: galaxyz.net
  • Đánh giá: 3 ⭐ ( 3902 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Trong khi JavaScript vani tiếp tục bắt kịp JQuery về khả năng và tính nhất quán trên nhiều trình duyệt, thì việc xử lý các biểu mẫu gửi trong JavaScript vẫn có thể là một bãi mìn của các lỗi và sự không nhất quán.

JAVASCRIPT: jQuery AJAX gửi biểu mẫu

  • Tác giả: vi.fmihm.org
  • Đánh giá: 5 ⭐ ( 7336 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Tôi có một biểu mẫu với tên orderproductForm và số lượng đầu vào không xác định. Tôi muốn thực hiện một số loại jQuery.get hoặc ajax hoặc bất kỳ thứ gì tương tự như vậy sẽ gọi một trang thông qua Ajax và gửi cùng một …

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình

Xem Thêm  Java for Loop (Với các ví dụ) - cú pháp vòng lặp cho java