Skip to content
Home » Classic Asp Jquery Ajax Post Example | Example Explained

Classic Asp Jquery Ajax Post Example | Example Explained

jQuery Send & Receive JSON Object using ajax post asp net mvc with Example

Examples:

Request the test.php page, but ignore the return results.

Request the test.php page and send some additional data along (while still ignoring the return results).

Pass arrays of data to the server (while still ignoring the return results).

Alert the results from requesting test.php (HTML or XML, depending on what was returned).

Alert the results from requesting test.cgi with an additional payload of data (HTML or XML, depending on what was returned).

Get the test.php page contents, which has been returned in json format (

“John”,”time”=>”2pm” ) ); ?>), and add it to the page.

Get another page on the same domain. Outputs to console both the data returned and the type of data returned.

ASP – AJAX and ASP

AJAX is used to create more interactive applications.

classic asp jquery ajax post example

Ajax là một công nghệ mạnh mẽ cho phép tương tác với máy chủ và cập nhật giao diện người dùng mà không cần tải lại trang web. Trong bài viết này, chúng ta sẽ tìm hiểu cách sử dụng Ajax trong ASP-classic với jQuery để thực hiện một ví dụ Ajax POST.

ASP-classic là một ngôn ngữ lập trình phía máy chủ cũng như môi trường phát triển web. ASP-classic được sử dụng rộng rãi trong quá khứ và vẫn còn được sử dụng bởi nhiều doanh nghiệp và tổ chức. jQuery là một thư viện JavaScript phổ biến, giúp chúng ta dễ dàng thao tác với HTML DOM và tương tác với máy chủ.

Đầu tiên, chúng ta sẽ tạo một form đơn giản trong ASP-classic để nhập dữ liệu. Dưới đây là ví dụ của form:

“`html

“`

Tiếp theo, chúng ta cần lưu trữ và xử lý dữ liệu được gửi từ form. Trong ví dụ này, chúng ta sẽ sử dụng một file ASP-classic có tên “process_form.asp” để làm điều đó. Dưới đây là nội dung của file “process_form.asp”:

“`asp“`

Sau đó, chúng ta sẽ tạo một request Ajax bằng jQuery và gửi dữ liệu từ form bằng phương thức POST. Dưới đây là ví dụ của mã JavaScript:

“`javascript$(document).ready(function() {$(‘#myForm’).submit(function(event) {event.preventDefault();

var formData = $(this).serialize();

$.ajax({url: ‘process_form.asp’,type: ‘POST’,data: formData,success: function(response) {$(‘#result’).html(response);},error: function(xhr, status, error) {console.log(error);}});});});“`

Trong ví dụ trên, chúng ta đã sử dụng phương thức `$().submit()` của jQuery để chặn sự kiện mặc định của form khi nút Gửi được nhấn. Sau đó, chúng ta đã sử dụng phương thức `$(this).serialize()` để chuyển đổi dữ liệu của form thành chuỗi URL-encoded và gán cho biến `formData`. Sau đó, chúng ta đã sử dụng phương thức `$.ajax()` của jQuery để tạo một request Ajax và gửi dữ liệu bằng phương thức POST. Trong hàm `success()`, chúng ta đã cập nhật phần tử có id “result” với kết quả trả về từ server. Trong trường hợp xảy ra lỗi, chúng ta đã sử dụng hàm `error()` để ghi lại lỗi vào console.

Tiếp theo, chúng ta cần hiển thị kết quả trả về từ server cho người dùng. Chúng ta đã tạo một phần tử HTML có id “result” trong form như sau:

“`html

“`

Nếu mã JavaScript hoạt động đúng, khi chúng ta nhấn nút Gửi trong form, kết quả trả về từ server sẽ được hiển thị trong phần tử có id “result”.

Cuối cùng, chúng ta cần xử lý ngoại lệ và lỗi trong trường hợp xảy ra. Trong ví dụ này, chúng ta đã sử dụng hàm `console.log()` để ghi lại lỗi vào console. Bạn có thể tùy chỉnh xử lý ngoại lệ và lỗi theo nhu cầu của mình.

FAQs:

1. Tại sao chúng ta cần sử dụng Ajax trong ASP-classic với jQuery?Ajax cho phép chúng ta tương tác với máy chủ và cập nhật giao diện người dùng mà không cần tải lại toàn bộ trang web. Điều này giúp giảm thời gian tải trang và cung cấp trải nghiệm người dùng tốt hơn.

2. Tại sao chúng ta sử dụng jQuery trong ví dụ này?jQuery giúp chúng ta dễ dàng thao tác với HTML DOM và tương tác với máy chủ. Nó cung cấp các phương thức và sự kiện tiện ích giúp việc tương tác với Ajax dễ dàng và hiệu quả hơn.

3. Tôi có thể sử dụng phương thức GET thay vì POST không?Có, bạn có thể sử dụng phương thức GET trong ví dụ này bằng cách thay đổi giá trị của thuộc tính “type” trong phương thức `$.ajax()` từ “POST” sang “GET”.

Từ khoá người dùng tìm kiếm: classic asp jquery ajax post example asp classic xmlhttprequest, demo_get asp

Chuyên mục: Top 100 classic asp jquery ajax post example

jQuery Ajax Tutorial #2 – Posting data to backend (jQuery tutorial #8)

How to POST data using jQuery AJAX?

Trong quá trình phát triển ứng dụng web, chúng ta thường gặp trường hợp cần gửi dữ liệu từ trình duyệt đến máy chủ một cách động mà không cần làm mới trang web. Để thực hiện điều này, jQuery AJAX là một công cụ hữu ích. Trong bài viết này, chúng ta sẽ tìm hiểu cách gửi dữ liệu sử dụng jQuery AJAX.

AJAX là viết tắt của Asynchronous JavaScript and XML. Nó là một công nghệ mà cho phép chúng ta gửi và nhận dữ liệu đến máy chủ một cách bất đồng bộ mà không cần làm mới trang web. AJAX thường được sử dụng trong việc cập nhật dữ liệu trên trang web, tìm kiếm và gửi form mà không làm mất đi trạng thái hiện tại của trang.

jQuery là một thư viện JavaScript phổ biến được sử dụng rộng rãi trong phát triển web. Nó cung cấp một số phương thức giúp ta dễ dàng thực hiện các tác vụ AJAX. Trong bài viết này, chúng ta sẽ sử dụng phương thức `$.ajax()` của jQuery để gửi dữ liệu đến máy chủ.

Đầu tiên, chúng ta cần tạo một form HTML để nhập dữ liệu. Ví dụ, ta có một form đơn giản để nhập tên và email:

“`

“`

Tiếp theo, chúng ta sẽ viết mã JavaScript để bắt sự kiện khi nút Gửi được nhấn.

“`$(document).ready(function(){$(“#submitBtn”).click(function(){var name = $(“#name”).val();var email = $(“#email”).val();

$.ajax({url: “server.php”,method: “POST”,data: {name: name, email: email},success: function(response){// Xử lý dữ liệu trả về từ máy chủ}});});});“`

Trong đoạn mã JavaScript trên, chúng ta đã sử dụng phương thức `$.ajax()` của jQuery, truyền vào URL của tệp xử lý máy chủ (server.php), phương thức là “POST” và các dữ liệu từ form (`{name: name, email: email}`).

Máy chủ sẽ tiếp nhận yêu cầu POST và xử lý dữ liệu. Sau đó, nó sẽ trả về dữ liệu phản hồi gửi lại cho máy khách. Đoạn mã JavaScript đã sử dụng hàm `success()` để xử lý phản hồi từ máy chủ sau khi yêu cầu đã hoàn thành.

Vậy là chúng ta đã biết cách gửi dữ liệu sử dụng jQuery AJAX. Tuy nhiên, có một số câu hỏi thường gặp về chủ đề này:

FAQs:

1. Tôi cần phải bổ sung thêm các thiết lập khác nhau cho yêu cầu AJAX như làm thế nào?Trong ví dụ này, chúng ta chỉ sử dụng một số phương thức và các thiết lập cơ bản. Tuy nhiên, jQuery AJAX rất linh hoạt và cho phép bạn thiết lập các tùy chọn như: dataType, beforeSend, complete, timeout, v.v.

2. Làm thế nào để xử lý lỗi khi gửi yêu cầu AJAX?Bạn có thể sử dụng hàm `error()` sau phương thức `success()` để xử lý các lỗi phát sinh trong quá trình gửi yêu cầu AJAX.

3. Tôi muốn gửi dữ liệu dạng JSON thay vì dạng form thông thường, làm thế nào?Để gửi dữ liệu dạng JSON, bạn cần thiết lập tùy chọn `contentType` thành “application/json” và chuyển dữ liệu thành dạng chuỗi JSON bằng cách sử dụng hàm `JSON.stringify()`.

4. Tôi cần thực hiện một yêu cầu AJAX không đồng bộ, làm thế nào?Trong ví dụ này, chúng ta đã sử dụng một yêu cầu bất đồng bộ bằng cách sử dụng AJAX. Điều này có nghĩa là mã JavaScript sẽ tiếp tục thực thi ngay sau khi gửi yêu cầu, không chờ đợi phản hồi từ máy chủ. Điều này cho phép người dùng tương tác tiếp tục với trang web trong khi yêu cầu AJAX đang xử lý.

Tổng kết, gửi dữ liệu sử dụng jQuery AJAX là một cách tiện lợi để tương tác với máy chủ mà không làm mất đi trạng thái hiện tại của trang. jQuery AJAX là một công cụ mạnh mẽ và linh hoạt trong việc xử lý việc gửi và nhận dữ liệu từ máy chủ. Hy vọng rằng bài viết này đã giúp bạn hiểu rõ hơn về cách thức hoạt động của nó và cung cấp các gợi ý giúp bạn sử dụng jQuery AJAX hiệu quả trong các dự án của mình.

How to POST data using AJAX in asp net?

AJAX (Asynchronous JavaScript and XML) là một công nghệ cho phép gửi dữ liệu giữa trình duyệt và máy chủ mà không cần tải lại trang web. Điều này giúp tăng tốc độ tải trang và trải nghiệm người dùng. Trong bài viết này, chúng ta sẽ tìm hiểu cách gửi dữ liệu sử dụng AJAX trong ASP.NET.

## Bước 1: Chuẩn bị môi trường

Trước khi bắt đầu, hãy đảm bảo rằng bạn đã có môi trường phát triển ASP.NET đã được cài đặt và sẵn sàng. Có thể bạn đã sử dụng Visual Studio hoặc bất kỳ editor mã nguồn nào khác.

## Bước 2: Tạo giao diện người dùng

Đầu tiên, chúng ta cần tạo một giao diện người dùng (UI) để người dùng nhập dữ liệu và gửi đi. Ví dụ, chúng ta sẽ tạo một form đơn giản với hai trường nhập liệu: tên và email.

“`html

jQuery Send & Receive JSON Object using ajax post asp net mvc with Example
jQuery Send & Receive JSON Object using ajax post asp net mvc with Example

Classic ASP + Ajax

What’s wrong with this code?


$.ajax({ //url: 'http://ip.jsontest.com/', // url: 'http://ipinfo.io/json', //url: 'http://ip-api.com/json', url: 'http://www.onecert.com.br/json.asp', success: function(data) { alert("OK"); }, error: function(dataerror) { alert("NO"); } });

I generate a CLASSIC ASP that produces a valid JSON output as confirmed by online testing tools. While testing with AJAX, I found that any other URL works fine but not the one for Classic ASP .

The version of JSON used to create classic asp is 2.0.2.asp.


<% Response.ContentType = "application/json" Dim member Set member = jsObject() member("name") = "Daniel" member("surname") = "Smith" member("message") = "Hello" member.Flush %>

Why? (I’m a beginner)

The outcome was identical whether I attempted it with or without Response.ContentType.

Thanks for all repplies

http://jsfiddle.net/gwfcr5z8/

Solution 1:

Do you have a Page Domain that differs from “http://www.onecert.com.br”? If so, this may be causing a Cross Origin Policy problem. The Browser Console will display an error in this case.

The request from another origin has been blocked due to the Same Origin Policy. The policy prevents reading the remote resource from http://www.onecert.com.br/json.asp. To resolve this issue, either move the resource to the same domain or enable CORS.

In the event that this is true, kindly consult the links provided below.

Having trouble using jQuery to retrieve JSON from a different domain, utilizing JSONP.

The jQuery getJSON function functions properly when used on a local server, but is unable to function when used across different domains.

http://en.wikipedia.org/wiki/JSONP

Solution 2:

Gratitude to both @Dot-net-learner and @Lankymart for their help.

Thanks to your assistance, I have resolved the issue and gained a better understanding of it.

I tested the client script on my computer with the ASP code at the web domain and also tried it out on jsFiddle, using the CORS issue in both cases.

The ASP code and client script being on the same domain resulted in perfect functioning.

Encountering the CORS issue, I decided to rewrite the script and modify the Classic Asp code, which helped me resolve the problem.

Client-Script:


$.ajax({ url:'http://www.onecert.com.br/json.asp', dataType: 'jsonp', jsonp: 'callback', error: function(jqXHR, textStatus, errorThrown){ alert("NO") }, success: function(data){ alert("YEAAAAAAH!") } });

Server Classic Asp:


dim callback callback = Request("callback") Response.Write(callback & "([{""name"": ""Daniel"", ""surname"": ""Smith"", ""message"": ""Hi""}])")

The client-script is functional beyond the specified location ASP Domain , even on platforms like jsFiddle.

jsFiddle

We are grateful for individuals like lot! people who generously share their knowledge and contribute to improving the world of IT. 😀 😀 😀 😀

The ASP File – “gethint.asp”

The ASP file checks an array of names, and returns the corresponding name(s) to the browser:

response.expires=-1

dim a(30)

‘Fill up array with names

a(1)=”Anna”

a(2)=”Brittany”

a(3)=”Cinderella”

a(4)=”Diana”

a(5)=”Eva”

a(6)=”Fiona”

a(7)=”Gunda”

a(8)=”Hege”

a(9)=”Inga”

a(10)=”Johanna”

a(11)=”Kitty”

a(12)=”Linda”

a(13)=”Nina”

a(14)=”Ophelia”

a(15)=”Petunia”

a(16)=”Amanda”

a(17)=”Raquel”

a(18)=”Cindy”

a(19)=”Doris”

a(20)=”Eve”

a(21)=”Evita”

a(22)=”Sunniva”

a(23)=”Tove”

a(24)=”Unni”

a(25)=”Violet”

a(26)=”Liza”

a(27)=”Elizabeth”

a(28)=”Ellen”

a(29)=”Wenche”

a(30)=”Vicky”

‘get the q parameter from URL

q=ucase(request.querystring(“q”))

‘lookup all hints from array if length of q>0

if len(q)>0 then

hint=””

for i=1 to 30

if q=ucase(mid(a(i),1,len(q))) then

if hint=”” then

hint=a(i)

else

hint=hint & ” , ” & a(i)

end if

end if

next

end if

‘Output “no suggestion” if no hint were found

‘or output the correct values

if hint=”” then

response.write(“no suggestion”)

else

response.write(hint)

end if

%>

By Chris on Code and Andy Hattemer

jQuery can be paired with form submission to handle validation. This has the benefit of providing users with feedback on any errors in their input.

In this tutorial, you will be presented with a sample form that communicates to a PHP backend. The form will use jQuery to process a form without a page refresh (using AJAX), indicate any errors, and also display a success message.

Deploy your frontend applications from GitHub using DigitalOcean App Platform. Let DigitalOcean focus on scaling your app.

To complete this tutorial, you will need:

Note: This tutorial does not specify the latest versions of jQuery (currently 3.5.1) or Bootstrap (currently 5.0.0-beta1). However, many of the lessons in this tutorial still pertain to the latest versions.

This tutorial was verified with PHP v7.3.24, jQuery v2.0.3, and Bootstrap v3.0.3.

For the purposes of this tutorial, the backend will be written in PHP.

First, open a terminal window and create a new project directory:


mkdir jquery-form-validation

Navigate to this new project directory:


cd jquery-form-validation

Then, use your code editor to create a new

process.php

file:

This file will take values for

name

,

superheroAlias

. If any of these values are not provided, an error message will be sent back. Many other validations could be performed at this point, but for the purposes of this tutorial, you will only be ensuring these required inputs have been provided. Otherwise, if a value for

name

,

superheroAlias

are present, a success message will be sent back.

Note: In a real-world scenario, the backend would also be responsible for other tasks such as taking the data and saving changes to a database, creating a session, or sending an email.

Now that you have the form processing completed, you can create the form.

For the purposes of this tutorial, Bootstrap will be used to build out the views.

In your project directory, use your code editor to create an

index.html

file:


<br /> jQuery Form Example<br />

Processing an AJAX Form




The CDN (content delivery network) version of Bootstrap and jQuery will be referenced. The form’s

action

will be set to the PHP file that was created earlier. The form will consist of fields for

name

,

superheroAlias

. The form will also need a Submit button.

Open a terminal window and navigate to the project directory. And run the PHP server:


php -S localhost:8000

Visit

localhost:8000

in your web browser and observe the following:

Now that you have the form completed, you can create the script to handle form submission.

To submit a form via AJAX, your script will need to handle four tasks:

In your project directory, use your code editor to create a new

form.js

file:


$(document).ready(function () { $("form").submit(function (event) { var formData = { name: $("#name").val(), email: $("#email").val(), superheroAlias: $("#superheroAlias").val(), }; $.ajax({ type: "POST", url: "process.php", data: formData, dataType: "json", encode: true, }).done(function (data) { console.log(data); }); event.preventDefault(); }); });

This code retrieves the data from the

name

,

superheroAlias

fields. It then performs an AJAX request to

process.php

with a payload of form data. After a successful connection, the console will log the response data.

event.preventDefault()

is used to prevent the form from behaving by default by reloading the page on submission.

After saving your changes to

form.js

, revisit the

index.html

file with your code editor. Add a reference to the new JavaScript file:


<br /> jQuery Form Example<br />



Now when a user presses the Submit button on the form, the JavaScript code will retrieve all the input values and send a POST request to

process.php

.

Note: You will be using the

.done

callback to handle a successful AJAX request. This used to be called

.success

, but that has since been deprecated in jQuery 1.8+.

Another alternative is to use

serialize

instead of pulling the form information individually.

The PHP script will process the inputs that the AJAX call sent and return the

$data[]

array that was created. You can observe this in your browser’s console after you submit your form:

Now that you have the form logic completed, you can create the script to handle form errors.

In the PHP script, the code checks to ensure that all the fields are required. If a field is not present, an error is sent back.

Revisit

form.js

and add the following highlighted lines of code:


// ... $.ajax({ type: "POST", url: "process.php", data: formData, dataType: "json", encode: true, }).done(function (data) { console.log(data); if (!data.success) { if (data.errors.name) { $("#name-group").addClass("has-error"); $("#name-group").append( '

' + data.errors.name + "

" ); } if (data.errors.email) { $("#email-group").addClass("has-error"); $("#email-group").append( '

' + data.errors.email + "

" ); } if (data.errors.superheroAlias) { $("#superhero-group").addClass("has-error"); $("#superhero-group").append( '

' + data.errors.superheroAlias + "

" ); } } else { $("form").html( '

' + data.message + "

" ); } }); event.preventDefault(); }); // ...

This code checks to see if the response contains an error for each field. If an error is present, it adds a

has-error

class and appends the error message.

Now, revisit your form in a web browser and experiment with submitting data with the form.

If there are any errors that come back from the server, the form will provide feedback on any required fields:

And if there are no errors that come back from the server, the form will provide feedback for a successful submission:

Every time we submit the form, our errors from our previous submission are still there. You will need to clear them by removing them as soon as the form is submitted again.

Revisit

form.js

and add the following highlighted lines of code:


// ... $("form").submit(function (event) { $(".form-group").removeClass("has-error"); $(".help-block").remove(); // ... }); // ...

This code will remove the

has-error

class from all

.form-group

elements. It will also remove all

.help-block

elements with error messages.

If there is an error connecting to the server, there will be no JSON response from the AJAX call. To prevent users from waiting for a response that will never arrive, you can provide an error message for connection failures.

Revisit

form.js

and add the following highlighted lines of code:


// ... $.ajax({ type: "POST", url: "process.php", data: formData, dataType: "json", encode: true, }) .done(function(data) { // ... }) .fail(function (data) { $("form").html( '

Could not reach server, please try again later.

' ); }); // ...

If the server is broken or down for any reason, a user who attempts to submit a form will get an error message:

Now that you have the server error message complete, you have completed the example form.


$.postinstead of


$.ajax

jQuery also provides a

$.post

shorthand method as an alternative to

$.ajax

.

The

$.ajax

code in

form.js

could be rewritten with

$.post

:


$.post('process.php', function(formData) { // place success code here }) .fail(function(data) { // place error code here });

The advantage of

$.post

is it does not require as much connection configuration to be declared.

In this article, you built a sample form that communicates to a PHP backend with jQuery and displays any errors in the form.

As a next step, you will want to explore more complex validations like valid email addresses and dates. You may also be interested in applying client-side validations that work in the browser.

If you’d like to learn more about JavaScript, check out our JavaScript topic page for exercises and programming projects.

Want to deploy your application quickly? Try Cloudways, the #1 managed hosting provider for small-to-medium businesses, agencies, and developers – for free. DigitalOcean and Cloudways together will give you a reliable, scalable, and hassle-free managed hosting experience with anytime support that makes all your hosting worries a thing of the past. Start with $100 in free credits!

This textbox defaults to using Markdown to format your answer.

You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!

Hello, can you guide on how to add google recaptcha to the form?

This comment has been deleted

specifically: when I fill out the form (correctly/incorrectly) I can see in the browser console the correct success true/false output, but the form does not deliver the success/fail message, it stays showing the form.

doesn’t seem to work!

This code doesn´t really work anymore: Uncaught ReferenceError: data is not defined is the error at the console. I don´t know why exactly this occurs. I am using php7.4.

Great tutorial! Very helpful!

I ran into one small issue trying to use $.post. If you want to use $.post instead of $.ajax with the code above, you need to add the ‘json’ type after the function:

$.post(‘process.php’, function(formData) { // place success code here }, ‘json’) .fail(function(data) { // place error code here });

Don’t work {“success”:false,“errors”:{“name”:“Name is required.”,“email”:“Email is required.”,“superheroAlias”:“Superhero alias is required.”}}

is not working

Extremely helpful, very simple and concise.

Thanks so much

This is great.

Could you possible include a working example or a download of a build working version?

Click below to sign up and get $200 of credit to try our products over 60 days!

Working on improving health and education, reducing inequality, and spurring economic growth? We’d like to help.

Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.

Use jQuery AJAX in ASP.NET CORE 6?  You NEED to see how it´s done!
Use jQuery AJAX in ASP.NET CORE 6? You NEED to see how it´s done!

How to obtain data use Classic ASP from ajax json post

My goal is to discover a method of using Ajax JSON to transmit data to classic ASP. Although I have successfully called the ASP page with JSON, I am facing an issue where the revised sorting does not reflect in the database due to data not being able to reach the back-end.

front side

I utilize classic ASP for the backend, but I am facing difficulty in retrieving the data. Is there any solution to this issue?


<% Set conn = Server.CreateObject("ADODB.Connection") DBPath = Server.MapPath("wawaaddatatable.mdb") conn.Open "provider=Microsoft.Jet.OLEDB.4.0;Data Source=" & DBPath if request.QueryString("action")="update" then Response.ContentType = "application/json" Set rs = Server.CreateObject("ADODB.Recordset") rs.open "Select * From images ",conn,1,3 rs.addnew rs("sort")=request.form("sort") rs("upload_date")=date() rs("filename")="abc.jpg" rs.update rs.close end if %>

Solution:

The issue seems to be with the request being sent in JSON format, as the “sort” value is not available in the Request.Form collection. While it is possible to extract the value by parsing JSON, a simpler solution would be to send the request as a standard form post.

Below, you will find your modified script with accompanying comments. These changes will ensure that Request.Form(“sort”) continues to return a comma separated string of the sort order values, allowing your current back-end to function properly.

HTTP Request: GETPOST

Two commonly used methods for a request-response between a client and server are: GET and POST.

  • GET – Requests data from a specified resource
  • POST – Submits data to be processed to a specified resource

GET is basically used for just getting (retrieving) some data from the server. Note: The GET method may return cached data.

POST can also be used to get some data from the server. However, the POST method NEVER caches data, and is often used to send data along with the request.

To learn more about GET and POST, and the differences between the two methods, please read our HTTP Methods GET vs POST chapter.

4: How to use get and post methods in jQuery AJAX - Learn AJAX programming
4: How to use get and post methods in jQuery AJAX – Learn AJAX programming

The ASP File – “gethint.asp”

The ASP file checks an array of names, and returns the corresponding name(s) to the browser:

response.expires=-1

dim a(30)

‘Fill up array with names

a(1)=”Anna”

a(2)=”Brittany”

a(3)=”Cinderella”

a(4)=”Diana”

a(5)=”Eva”

a(6)=”Fiona”

a(7)=”Gunda”

a(8)=”Hege”

a(9)=”Inga”

a(10)=”Johanna”

a(11)=”Kitty”

a(12)=”Linda”

a(13)=”Nina”

a(14)=”Ophelia”

a(15)=”Petunia”

a(16)=”Amanda”

a(17)=”Raquel”

a(18)=”Cindy”

a(19)=”Doris”

a(20)=”Eve”

a(21)=”Evita”

a(22)=”Sunniva”

a(23)=”Tove”

a(24)=”Unni”

a(25)=”Violet”

a(26)=”Liza”

a(27)=”Elizabeth”

a(28)=”Ellen”

a(29)=”Wenche”

a(30)=”Vicky”

‘get the q parameter from URL

q=ucase(request.querystring(“q”))

‘lookup all hints from array if length of q>0

if len(q)>0 then

hint=””

for i=1 to 30

if q=ucase(mid(a(i),1,len(q))) then

if hint=”” then

hint=a(i)

else

hint=hint & ” , ” & a(i)

end if

end if

next

end if

‘Output “no suggestion” if no hint were found

‘or output the correct values

if hint=”” then

response.write(“no suggestion”)

else

response.write(hint)

end if

%>

Using Classic ASP and AJAX to Check Availability of a Username on User Registration Form

In this example, I’m showcasing how we can use ASP and AJAX to check for whether a username exists before a user completes a website registration form. When registering to join a community website, such as www.digg.com, users must typically choose a username or handle. Normally such usernames must be unique to the community, and because of this new users often run into the problem of choosing a name that is already in use. A couple common results occur on a typical registration form when a user submits his data:

  • The page reloads with a message indicating that the username is already in use, allowing him to choose another username and try again.
  • In some very bad cases, the page is refreshed, destroying everything the user input on the form requiring him to start over.

I’ll be adding a feature that allows the user to enter a username and check immediately if the username is available before submitting the entire form. Through the use of AJAX and ASP, we will update only a small section of the page rather than reloading the entire page.

The key to AJAX is asynchronous execution. You can call a function either synchronously (which most developers are familiar with and find intuitive) or asynchronously (usually counterintuitive). If you’ve ever done network programming, you’re likely familiar with asynchronous calls where a new thread is created and your function is executing in this new thread. The benefit of a synchronous call is that it doesn’t interfere with the main thread, in this case, the web browser. (To further illustrate the point, synchronous calls are made in the main thread, which normally isn’t a problem until it’s something that takes a long time, and then the user is left waiting, usually thinking his computer has locked up).

Since an asynchronous call runs in its own thread, the user is free to continuing working on the current page. When the call finishes, it will trigger an event that will execute a callback function. The callback function is the conduit by which you will access the result of the asynchronous call; this should be familiar ground if you’ve ever worked with asynchronous calls.

You’ll notice back at the beginning of this example that the ‘X’ in AJAX comes from XML. The result that the callback function obtains from the server is basically a string of information, any information. Most articles I’ve read about AJAX always show the return information as XML, but in reality it can return any information you need whether it’s XML, HTML, or a packed array of database information.

The final step in implementing AJAX is to actually do something with the information that you get in the callback function. Normally, you’ll be updating some element on the page with the new information. You could add new values to a list box, update static text on the site or refresh whole sections of the page, it’s really up to you.
In this example, we’ll be updating a

with some new text information that will let the user know whether the username he chose is available.

The above two examples show the result of the user entering two different usernames. We only updated the feedback text (i.e., available or unavailable), the entire page did not refresh or change in any other way in the user’s browser. Even if tthe operation takes a long time (poor network speed, an intensive operation etc), the user is still free to continue filling out the rest of the form.

For this example, I’ll only be including the code elements relevant to the example images above.


Client - HTML

Here we’re just creating the HTML code to display the labels, input boxes and, most importantly, the button and the fact that it calls the JavaScript ‘OnCheckAvailability’ function when it’s clicked. The div at the end is the item we’ll be updating on the web page asynchronously.


Client - JavaScript


//If our user enters data in the username input, then we need to enable our button
function OnChangedUsername()
{
if(document.form1.newuserid.value == "")
{
document.form1.btnCheckAvailability.disabled = true;
}
else
{
document.form1.btnCheckAvailability.disabled = false;
}
}


function OnCheckAvailability()
{
if(window.XMLHttpRequest)
{
oRequest = new XMLHttpRequest();
}
else if(window.ActiveXObject)
{
oRequest = new ActiveXObject("Microsoft.XMLHTTP");
}
oRequest.open("POST", "AJAX.asp", true);
oRequest.onreadystatechange = UpdateCheckAvailability;


oRequest.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
oRequest.send("strCmd=availability&strUsername=" + document.form1.newuserid.value);
}


function UpdateCheckAvailability()
{
if(oRequest.readyState == 4)
{
if(oRequest.status == 200)
{
document.getElementById("Available").innerHTML = oRequest.responseText;
}
else
{
document.getElementById("Available").innerHTML = "Asychronous Error";
}
}
}

The ‘OnCheckAvailability’ function is the function that is called when the user presses the ‘Check Availability’ button. This basically creates either an ‘XMLHttpRequest’ or ‘Microsoft.XMLHTTP’ ActiveX object. We check for each type because each one is for a specific browser, either Microsoft’s Internet Explorer browser or a Mozilla type browser (such as Firefox).

NOTE: We are not performing any validation to enforce username constraints, such as numeric or special character restrictions. In a production system, you should also perform this validation prior to checking availability.

Next we open the request to the server using a “GET” or “POST”. When posting the data you need to include a header as I have.

You also must register a callback function that the server can call when it finishes executing the code. If you don’t do this, you won’t be able to handle any returned data (this may be what you want, if you’re just making an asynchronous call to update something in a database for example). In my case I want to callback and handle the result of my query.

Finally, the last step is to actually send your data to the server, using the send() function of the request object.

The ‘UpdateCheckAvailability’ is our callback function; we registered it above in the OnCheckAvailable function. This function gets called after the server call has completed and has returned. You’ll notice the use of ‘readyState’ and ‘status’ in the request object. The readyState property allows us to handle the callback in the various states, 4 is the state that indicates a successfully completed operation. The status property indicates a standard HTTP response:

  • 200 being a successful response
  • 500 would be an internal error
  • 404 would be that the resource was not found

It’s a good idea to create error checking as I have so you have some clue when something goes wrong; you could elaborate on this even more to create a very robust callback feature.

(As a side note, it may be useful to throw in some alert() calls before readState and state, to see the control flow of the asynchronous call. The server actually calls back a few times on a successful calls, incrementing the readyState from 1-4 in succession, allowing you to hook into the various states for more advanced processing).

After we’ve confirmed that the call was a success, we can then check the response from the server, this is obtained through the request object’s ‘responseText’ parameter. You could also obtain data through ‘responseXML’, if you’re returning XML data. All that’s left is to update our DIV ‘Available’ to whatever the server sent to us, and we’ve updated the page without refreshing everything!

The glue that hooks the two JavaScript functions together and actually makes the callback back to the ‘UpdateCheckAvailability’ function is server side AJAX code. In reality, the AJAX code can be any server-side processing language such as ASP, ASP.NET, PHP, Python, Servlets etc. I’m using ASP as my server-side language of choice.

I’ve create a file AJAX.asp, which will serve as my AJAX ‘server’. In it I handle information from the client, in my case I’m only using AJAX for one part of my page but nothing says I couldn’t add a ton of AJAX functionality to my page, providing a very similar experience as a desktop application to the user.


Server - ASP


dim objRS
dim strSQL


set objRS = server.CreateObject("ADODB.RecordSet")


' Form Variables
dim strCmd
dim strUsername


strCmd = trim(Request.Form("strCmd").Item)
strUsername = trim(Request.Form("strUsername").Item)


select case strCmd
case "availability"
strSQL = "SELECT USERNAME FROM FELONS WHERE USERNAME = '" & strUsername & "'"
objRS.Open strSQL,objSecureDb.conn,adOpenForwardOnly,adLockReadOnly,adCmdText
if objRS.EOF then
Response.Write("Username " + strUsername + " is available")
else
Response.Write("Username " + strUsername + " is unavailable")
end if
case else
Response.Write("Invalid command: " + strCmd)
end select


set objRS = Nothing

The AJAX server is very simple; it creates a database connection (not shown) and a record set and extracts the information passed to it from the web page. The information passed was a command to the server as well as the username the user entered. Then a simple SQL statement is executed to find out whether or not the entered username already exists in the database or not.

We then return using some simple HTML markup the result of the SQL query, using colors as a better indication to the user what the status of their request is.

In the event that a developer entered and incorrect command, we simply respond back that the command was invalid, a great exercise in developing code that helps you help yourself and others. If for some reason something was wrong with the script itself, you would receive an Internal Error HTTP response of 500.

When this script finishes it will return our data to the client, which will then invoke the callback function we hooked in earlier. At that point as explained above, our information will be returned back to the web page and ultimately update the DIV with the appropriate information.

Conclusion

This is by no means the most efficient way of incorporating an AJAX implementation. For something simple, this is a perfectly solid route to take and will be much better than refreshing the page. However, you’ll notice I completely return the HTML from the server, when an improved method might be to return a simple one character digit that could later be interpreted as true or false, leaving the duty of outputting the correct message up to the JavaScript callback function. This choice is really up to you though.

A usability feature was also made to the example, but left out of this example because it did not have to do with AJAX itself. This was the simple decision to make the ‘Check Availability’ button disabled when the page loads. When the user begins typing into the username textbox, activate the button. In addition, if the user were to remove the text from the control then the button should again deactivate. This completes the full validation process for the ‘Check Availability’ feature described in this example.

This is just a very simple example of what the AJAX methodology can do, however an entire sight could be AJAX enabled, providing the user with a consistent and seamless browsing experience, which might go so far as to blur the lines between a desktop application and a web application.

Final Note

AJAX seems to be a catchphrase in the web development community lately and it may be confusing to a newcomer what exactly AJAX is, hopefully you’ve gotten a good idea reading this example, but suffice it to say that AJAX is really just a technique or methodology for passing data between client and server that ultimately relies on asynchronous calls. Such a technique has existed for a long time in networked applications and real-time applications as used in robotics; AJAX is simply the coined acronym for asynchronous web programming.

Resources

A Hype-Free Introduction to Ajax
http://www.oracle.com/technetwork/articles/schalk-ajax-088856.html

Other Recent Blog Posts

Find this useful?

Want to receive our monthly tip to make your website easier to use and safer? No spam, just good advice. Signup!

Interests

First of all, why use jQuery when the previous article works? Well, jQuery is a library that is designed to help web developers work with Javascript in a much more streamlined way. Internally, it handles a lot of the nonsense that developers have to work with in terms of cross-browser incompatibilities and it’s syntax and chaining abilities generally results in far less code being written. A lot more information about jQuery can be found here along with the downloads.

The scenario I shall use will stay the same as previous examples- an initial Select box containing the Company Names from the Northwind database, with the address and other details being retrieved asynchronously when a company is selected. These will be displayed in a specific area on the page. There are two approaches shown here – one shows the AJAX repsonse being generated as a snippet of HTML, and the other shopws the response being generated as JSON using a third party ASP library. But let’s start with the page that the user will see:

<% @LANGUAGE=”VBSCRIPT” CODEPAGE=”65001″ %>

<br /> Untitled Document<br />


<% strConn = “Provider=SQLNCLI10;Server=localhost;Database=NorthWind;Trusted_Connection=Yes;” Set Conn = Server.CreateObject(“ADODB.Connection”) Conn.Open strConn Set rs = Conn.Execute(“SELECT [CustomerID], [CompanyName] FROM [Customers]”) If Not rs.EOF Then arrCustomer = rs.GetRows rs.Close : Set rs = Nothing : Conn.Close : Set Conn = Nothing %>

<% Else rs.Close : Set rs = Nothing : Conn.Close : Set Conn = Nothing Response.Write ”

Something bad went wrong

” End If %>

The VBScript connects to a local SQL Server Northwind database and obtains the ID and the Company Name for all the Customers. Assuming that they were retrieved succesfully, they are placed in an array through the RecordSet.GetRows() method. The array is iterated through, and

<% @LANGUAGE=”VBSCRIPT” CODEPAGE=”65001″ %> <% strConn = “Provider=SQLNCLI10;Server=localhost;Database=NorthWind;Trusted_Connection=Yes;” Set Conn = Server.CreateObject(“ADODB.Connection”) Conn.Open strConn query = “SELECT * FROM Customers WHERE CustomerID = ?” CustomerID = Request.QueryString(“CustomerID”) arParams = array(CustomerID) Set cmd = Server.CreateObject(“ADODB.Command”) cmd.CommandText = query Set cmd.ActiveConnection = Conn Set rs = cmd.Execute(,arParams,1) If Not rs.EOF Then Response.Write ”


” & rs(“CompanyName”) & ”

” & _ “Address: ” & rs(“Address”) & “” & _ “City: ” & rs(“City”) & “” & _ “Region: ” & rs(“Region”) & “” & _ “PostalCode: ” & rs(“PostalCode”) & “” & _ “Country: ” & rs(“Country”) & “” & _ “Tel: ” & rs(“Phone”) & ”

” End If rs.Close : Set rs = Nothing : Set cmd = Nothing : Conn.Close : Set Conn = Nothing Response.End() %>

This is a fairly standard piece of VBScript data access. It connects to the database and retrieves the company record associated with the CustomerID value passed in the QueryString. It uses parameters to protect against any chance of SQL Injection. If successfully retrieved, a snippet of HTML is generated. The following code will go just before the closing tag:

After linking to the minimised jQuery file that’s available from Google Code, we get to the script that it specific to the page. The first instruction finds the element with the id of CustomerID which is the

One of the commentors – marlin – pointed to a resource apparently called “QueryToJson”, which I found is a method of the ASPJson Project. This code library is built using VBScript and is a JSON serializer. I haven’t tested it thoroughly, but I managed to get it to work quite easily for this article. To use it, you need to download the JSON_2.0.4.asp file and include that in your code. There is also a utility file (JSON_UTIL_0.1.1.asp) which contains a function to serialize an ADO RecordSet to JSON. Problem is that the function expects SQL and a connection. It doesn’t cater very well for parameters or dispose of the RecordSet obejct it creates. So I have added an amended version of the function to the top of the script which gets the data and returns it to the JSON Serializer. Here is the file contents:

<% @LANGUAGE=”VBSCRIPT” CODEPAGE=”65001″ %>

<% Function QueryToJSON(dbcomm, params) Dim rs, jsa Set rs = dbcomm.Execute(,params,1) Set jsa = jsArray() Do While Not (rs.EOF Or rs.BOF) Set jsa(Null) = jsObject() For Each col In rs.Fields jsa(Null)(col.Name) = col.Value Next rs.MoveNext Loop Set QueryToJSON = jsa rs.Close End Function %> <% strConn = “Provider=SQLNCLI10;Server=localhost;Database=NorthWind;Trusted_Connection=Yes;” Set conn = Server.CreateObject(“ADODB.Connection”) conn.Open strConn query = “SELECT * FROM Customers WHERE CustomerID = ?” CustomerID = Request.QueryString(“CustomerID”) arParams = array(CustomerID) Set cmd = Server.CreateObject(“ADODB.Command”) cmd.CommandText = query Set cmd.ActiveConnection = conn QueryToJSON(cmd, arParams).Flush conn.Close : Set Conn = Nothing %>

The only change needed to the original calling page is the second

Do you need JSON? Well, if you are looking at using the new templates in jQuery, you will for a start. Is this little library up to the job? As I said earlier, I haven't tested it thoroughly but I have identified a couple of weaknesses which were relatively simple to put right. JSON is just a string. Here's how it looks if the customer selected is White Clover Markets:

[ { "CustomerID":"WHITC", "CompanyName":"White Clover Markets", "ContactName":"Karl Jablonski", "ContactTitle":"Owner", "Address":"305 - 14th Ave. S. Suite 3B", "City":"Seattle", "Region":"WA", "PostalCode":"98128", "Country":"USA", "Phone":"(206) 555-4112", "Fax":"(206) 555-4115" } ]

I have formatted the JSON so that it is easier to see its structure, but it isn't difficult to serialize simple objects like that to JSON manually in code. Where the library may help is in serializing more complex structures.

The download is in a format that's easy to work with using WebMatrix. If you have already installed WebMatrix, just unzip the folder, right-click and choose "Open as web site with Microsoft WebMatrix". If you haven't installed WebMatrix yet, do so.

I've written the following Javascript code:


function sendCcbRequest(text) { var jsonToSend = "\"text\": \"" + escape(text) + "\""; $.ajax({ type: "POST", url: 'x.asp', data: jsonToSend, success: function(response) { alert("success:" + response); }, error: function() { alert("error"); } }); // end ajax }

How do I read the data that I post from my classic ASP code?

UpdateI've tried the following for my classic asp file x.asp.


<% Dim x x = Request.Form("text") Response.Write(x) %>

It still prints nothing.

Classic ASP + Ajax

Can you recommend a method for handling background processes in Classic ASP while also allowing for navigation to other pages without interrupting an AJAX request? Specifically, I am working on a form where shipping rates from UPS are displayed, and the initial request for results from UPS can take several minutes to return.

jQuery $.get() Method

The

$.get()

method requests data from the server with an HTTP GET request.

Syntax:

The required URL parameter specifies the URL you wish to request.

The optional callback parameter is the name of a function to be executed if the request succeeds.

The following example uses the

$.get()

method to retrieve data from a file on
the server:

Example

$.get("demo_test.asp", function(data, status){

alert("Data: " + data + "\nStatus: " + status);

});

});

The first parameter of

$.get()

is the URL we wish to request ("demo_test.asp").

The second parameter is a callback function. The first callback parameter holds the content of the page requested, and the second callback parameter holds the status of the request.

Tip: Here is how the ASP file looks like ("demo_test.asp"):

response.write("This is some text from an external ASP file.")

%>

jquery ajax method
jquery ajax method

Example Explained

In the example above, when a user types a character in the input field, a function called "showHint()" is executed.

The function is triggered by the onkeyup event.

Here is the HTML code:

Example


Start typing a name in the input field below:

First name:

Suggestions:

Code explanation:

First, check if the input field is empty (str.length == 0). If it is, clear the content of the txtHint placeholder and exit the function.

However, if the input field is not empty, do the following:

  • Create an XMLHttpRequest object
  • Create the function to be executed when the server response is ready
  • Send the request off to an ASP file (gethint.asp) on the server
  • Notice that q parameter is added gethint.asp?q="+str
  • The str variable holds the content of the input field

Classic ASP background process using AJAX or other way?

As part of my work, I'm currently handling a website built using Classic ASP. There's a form that retrieves displaying shipping rates from the UPS site. However, fetching the results from the UPS site for the first time usually takes several minutes to respond back.

In order to enhance the site's user experience, it is recommended to perform the UPS shipping calculation in the background. Once the background process is completed, the results can then be displayed on the form.

To address the issue, we implemented the jQuery AJAX technique. However, if the user switches to another page, the XHR request will be terminated, and they will have to remain on the same page for a minute until UPS replies back.

Could you recommend a way to handle background processes in Classic ASP and guide me on navigating to a different page without utilizing aborting AJAX request ?

Solution 1:

When dealing with sluggish back-end procedures, utilizing a SQL-based queue system on the server side is generally wise.

On the server assigned to you, develop a binary, service, or script that can access the queue table and retrieve information from UPS. Keep track of the status ID while writing the results back to the queue table.

Once the request is added to the queue table, your website can continuously check the table using ajax to determine if the data has been updated.

It's challenging to provide a clear illustration without specific examples, but here's a rudimentary one.


CREATE TABLE [dbo].[ParcelQueue]( [JobID] [int] IDENTITY(1,1) NOT NULL, [RequestTime] [datetime] NULL, [ParcelTrackingNumber] [varchar](255) NULL, [StatusID] [smallint] NULL, [Result_DeliveryDate] [datetime] NULL, CONSTRAINT [PK_test] PRIMARY KEY CLUSTERED ( [JobID] ASC )WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY] ) ON [PRIMARY] GO ALTER TABLE [dbo].[test] ADD CONSTRAINT [DF_test_RequestTime] DEFAULT (getdate()) FOR [RequestTime] GO

IDs that could be considered as statuses:

  1. Pending
  2. UPS Response OK
  3. UPS Response Failed

Solution 2:

To send data to UPS service, I made an ASP page that operates in an asynchronous manner. Additionally, I developed a background Windows process that periodically calls this ASP page.

By keeping the UPS channel open in our background process, users visiting the site won't encounter slow responses caused by the initial UPS request.

score:8

Accepted answer Your ajax is using

Your ajax is using

POST

, ASP will need to get the value using

request.form

instead of

request.querystring

- alternatively, change your ajax to

GET

.

score:2

Your form is POSTing so you can't access the variables you send via

Request.QueryString

but rather via

Request.Form

. Alternatively, change your ajax call to

type:'get'

.

Related Query
  • Change dropdown value when another dropdown selected in a form using JQuery & ajax post
  • How to post value from one php page to another using ajax
  • Laravel 5.5 keep getting 419 post error on ajax call after several attempts
  • ajax POST call to controller gives null value in spring
  • PhantomJs - Getting value out of page.evaluate + ajax (Synchronous Version)
  • ASP Classic inline code + jQuery: How to do ajax call
  • Jquery Ajax post request returns success, but Rails/Sqlite database not getting updated
  • Tiny editor is not getting post value
  • Django: How to retrieve in an AJAX POST request the value of two different variables?
  • I want to update a min value of a number field in a html form with a value returned from an ajax post without refreshing the page
  • jQuery Ajax Submit Post not getting success message back
  • Classic Asp Persits Upload And Jquery Ajax
  • Getting the value of last div in AJAX request
  • Post multiple value using ajax
  • asp.net mvc with jquery ajax cal HttpPostedFileBase file getting null value
  • ASP MVC, jQuery issue returning error on ajax post when user hits enter key whilst textbox has focus
  • getting a json string in php from jquery ajax post
  • jQuery AJAX & XML getting node value
  • Getting undefined response from jQuery AJAX form post
  • getting a value along with html markup returned by Ajax in Jquery
  • How to send and receive array value by ajax.api using classic asp
  • Use global variable value in AJAX JSON POST request
  • Post array text input value to ajax
  • PHP not getting $_POST from ajax post
  • Ajax getting a value from php?
  • Getting Return Value from AJAX
  • unable to pass post value over from ajax to the page in .net c#
  • Ajax post failing in asp
  • Jquery POST combination with classic asp
  • PHP AJAX POST getting wrong data
  • I want to know how to only activate the form submit, not getting value to ajax url in jquery?
  • How to post mulitple check box value using ajax jquery in laravel
  • How can I get a POST value from a checkbox that appeared on a form after an AJAX query?
  • jquery ajax posting problems getting null value in alert
  • Getting reCaptcha to work over Ajax with jQuery
  • jQuery Ajax with ASP.NET MVC Action: Passing arguments from JavaScript in POST
  • Getting pixel value of margin in ie7
  • Jquery and Ajax Post issue
  • jquery checkbox help getting checkbox name and value
  • How do I correctly Re-render a Recaptcha in ASP.NET MVC 2 after an AJAX POST
  • synchronous AJAX post from unload event: how to ensure user sees most up-to-date information from DB on next page load
  • Why is AJAX POST request with Laravel 8 from within Vuejs is throwing 405 (Method Not Supported) error?
  • ASP.NET Core Failed AJAX Post Request
  • Post Excel file through AJAX
  • Using AJAX to post data into API
  • Serialize dynamically created form // Post ajax request
  • How to post data of selected rows of a dataTable to php controller through an JQuery ajax call
  • Ajax Post php class not loading problems?
  • adding data to form right before ajax post
  • "413 Request Entity Too Large" for AJAX POST request but not for normal file upload
More Query from same tag
  • jQuery masonry - call method after masonry reload
  • Use JQuery Ajax to update the number of likes on a database
  • Can't change colour of text with CSS in a table
  • HighCharts Pie chart, 50+ labels, not showing all of them
  • Get direction a div is facing
  • JQuery click function not getting called
  • Best alternative to dynamically highlight my Navbar link using jQuery?
  • Parsley.js isValid() returns null using custom validator
  • jqueryui droppable and sortable can work together?
  • Lazy Load vs Combine/Minify vs CDN Javascript (AngularJS)
  • tilt.js pushes parallax element down a few pixels
  • JQuery Ajax Error Text
  • jQuery color picker plugin experiment
  • Change background color of a div on hover from an array of colors
  • How can use :contains() Selector to determine the object has a certain keyword when it is clicked?
  • Suggest a good image upload-and-crop tool
  • Hide and show specific divs on select
  • Change element when in top half of the viewport with jquery
  • add dot when mouse click for mapping
  • content distribution network (CDN): Loading CSS or Javascript library
  • How to change the drop zone in jQuery
  • Using jQuery, is is possible to watch a DOM element and report each time something is done to it?
  • Remove element's parent row
  • Detecting overflow with qTip2
  • Is a jQuery element an instance of a plugin?
  • How to close a side bar in mobile view when user perform "scroll" or "touch" or "Click" Event
  • Mixing an MVC model with 'contenteditable' attribute -- is it possible to post data back to server in a simple fashion?
  • Jquery Mobile Filter system, can't hide multiple divs
  • Is ajax post using jquery secured?
  • jQuery why $(this) doesn't work in a setTimeout method?
How to use jQuery - AJAX Get and Post Methods
How to use jQuery - AJAX Get and Post Methods

asp classic xmlhttprequest

XMLHttpRequest là một đối tượng nổi tiếng và quan trọng trong việc tương tác với các API và dịch vụ web. Đối tượng này cho phép chúng ta tạo kết nối với máy chủ và truy vấn dữ liệu mà không cần phải tải lại trang web hiện tại. Với XMLHttpRequest, chúng ta có thể gửi các yêu cầu HTTP đến máy chủ và xử lý các phản hồi từ máy chủ một cách linh hoạt và hiệu quả.

XMLHttpRequest trong ASP Classic thường được sử dụng để thực hiện các yêu cầu AJAX (Asynchronous JavaScript and XML) mà không làm mất đi trải nghiệm người dùng trên trang web. Nó cho phép chúng ta nạp dữ liệu từ máy chủ mà không cần tải lại trang đầy đủ. Điều này tạo ra trải nghiệm người dùng mượt mà và giảm lưu lượng mạng bằng cách chỉ cập nhật phần nội dung cần thiết.

Để sử dụng XMLHttpRequest trong ASP Classic, chúng ta cần tạo một đối tượng XMLHttpRequest mới:

“`Set xmlhttp = CreateObject(“MSXML2.XMLHTTP”)“`

Sau khi tạo đối tượng, chúng ta có thể sử dụng các phương thức và thuộc tính của nó để gửi yêu cầu HTTP và xử lý phản hồi. Dưới đây là một ví dụ về việc gửi yêu cầu GET và xử lý phản hồi trả về:

“`xmlhttp.open “GET”, “http://example.com/api/data”, Falsexmlhttp.send

If xmlhttp.Status = 200 ThenResponse.Write xmlhttp.responseTextEnd If“`

Trong ví dụ trên, chúng ta sử dụng phương thức `open` để mở một kết nối với địa chỉ URL cần truy cập và phương thức `send` để gửi yêu cầu HTTP. Sau đó, chúng ta kiểm tra trạng thái của yêu cầu để đảm bảo rằng nó thành công trước khi xử lý phản hồi.

FAQs:

1. XMLHttpRequest có thể được sử dụng để gửi yêu cầu POST không?– Có, chúng ta có thể sử dụng phương thức `open` với tham số thứ hai là “POST” để gửi yêu cầu POST.

2. Làm thế nào để truyền dữ liệu qua XMLHttpRequest?– Chúng ta có thể sử dụng phương thức `send` với đối số để gửi dữ liệu qua yêu cầu. Ví dụ: `xmlhttp.send “username=test&password=123″`.

3. Làm thế nào để xử lý phản hồi từ máy chủ?– Chúng ta có thể sử dụng thuộc tính `responseText` để lấy nội dung phản hồi từ máy chủ. Ngoài ra, còn có các thuộc tính như `responseXML`, `status`, và `statusText` để xử lý các phần khác của phản hồi.

4. XMLHttpRequest có hỗ trợ xử lý lỗi không?– Có, chúng ta có thể sử dụng các sự kiện `onerror`, `ontimeout`, và `onreadystatechange` để xử lý lỗi trong XMLHttpRequest.

5. Có thể sử dụng XMLHttpRequest để gửi yêu cầu đến các API bên ngoài không?– Có, chúng ta có thể sử dụng XMLHttpRequest để gửi yêu cầu đến các API bên ngoài, miễn là chúng tuân thủ cùng một nguyên tắc về chính sách cùng nguồn gốc (Same-Origin Policy).

6. Có cách nào để theo dõi tiến trình của yêu cầu XMLHttpRequest không?– Chúng ta có thể sử dụng sự kiện `onprogress` để theo dõi và báo cáo tiến trình của yêu cầu XMLHttpRequest.

XMLHttpRequest là một công cụ mạnh mẽ trong ASP Classic để tương tác với máy chủ và cập nhật dữ liệu một cách linh hoạt trên website. Bằng cách sử dụng XMLHttpRequest, chúng ta có thể tạo ra trải nghiệm người dùng mượt mà và tăng tốc độ tải trang.

Classic asp and ajax

I'm having difficulty retrieving a value from Ajax to ASP. My form contains a select input field, and when I choose one option from the selection, I aim to modify the value of my form action tag.


$(document).ready(function() { $("#preLin").change(function(){ if ($('#preLin option:selected').val() === "Test" ) { var actionTag = "printHosp.his"; $.ajax({ type: "POST", url: "http://local:8001/Default.his", data: {actionTag: "test.asp"}, success: function(data) { alert(actionTag);} }); });

ASP


dim actionTag actionTag = Request.form("actionTag")

Solution:

To achieve your desired outcome, it is recommended to follow the best practices. However, my suggestion would be to incorporate an "ajax error function" and thoroughly examine the

responseText

to solve the issue at hand.

Modify your ajax request to a similar alternative.


$.ajax({ type: "POST", url: "http://eli.local:8001/priemimas/Default.his", data: {actionTag: "test.asp"}, success: function(data) {alert(actionTag);}, error: function(xhr) {alert(xhr.responseText);} });

How to Post Data to Server Using Jquery  | ASP.NET MVC | C#
How to Post Data to Server Using Jquery | ASP.NET MVC | C#

Example Explained

In the example above, when a user types a character in the input field, a function called "showHint()" is executed.

The function is triggered by the onkeyup event.

Here is the HTML code:

Example


Start typing a name in the input field below:

First name:

Suggestions:

Code explanation:

First, check if the input field is empty (str.length == 0). If it is, clear the content of the txtHint placeholder and exit the function.

However, if the input field is not empty, do the following:

  • Create an XMLHttpRequest object
  • Create the function to be executed when the server response is ready
  • Send the request off to an ASP file (gethint.asp) on the server
  • Notice that q parameter is added gethint.asp?q="+str
  • The str variable holds the content of the input field

I am trying to get the value of the posted textbox using jquery AJAX:

This is my code:


$(document).ready(function(){ $('#submitButton').click(function() { $.ajax({ type: "POST", url: "test.asp", data: $("#form1").serialize(), cache: false, dataType: "html", success: function(responseText){ alert(responseText); }, error: function(resposeText){ alert(resposeText); }, }); return false; }); });

And this is the test.asp page:


<%@LANGUAGE="VBSCRIPT" CODEPAGE="65001"%> <% dim vwPW vwPW = request.QueryString("vwPW") response.write "returned " & vwPW %>

And my form is:

All i get is "retuned" and nothing after that. What would i be doing incorrect?

David

jQuery $.post() Method

The

$.post()

method requests data from the server using an HTTP POST request.

Syntax:

The required URL parameter specifies the URL you wish to request.

The optional data parameter specifies some data to send along with the request.

The optional callback parameter is the name of a function to be executed if the request succeeds.

The following example uses the

$.post()

method to send some data along with the
request:

Example

$.post("demo_test_post.asp",

name: "Donald Duck",

city: "Duckburg"

},

function(data, status){

alert("Data: " + data + "\nStatus: " + status);

});

});

The first parameter of

$.post()

is the URL we wish to request ("demo_test_post.asp").

Then we pass in some data to send along with the request (name and city).

The ASP script in "demo_test_post.asp" reads the parameters, processes them, and returns a result.

The third parameter is a callback function. The first callback parameter holds the content of the page requested, and the second callback parameter holds the status of the request.

Tip: Here is how the ASP file looks like ("demo_test_post.asp"):

dim fname,city

fname=Request.Form("name")

city=Request.Form("city")

Response.Write("Dear " & fname & ". ")

Response.Write("Hope you live well in " & city & ".")

%>

08: How to pass JSON data to server side using jQuery AJAX ?
08: How to pass JSON data to server side using jQuery AJAX ?

Gửi dữ liệu bằng AJAX trong ASP.NET

“`

Trong ví dụ trên, chúng ta sử dụng thư viện jQuery để lấy giá trị của trường nhập liệu tên và email. Sau đó, chúng ta sử dụng AJAX để gửi dữ liệu tới máy chủ sử dụng phương thức HTTP POST.

## Bước 3: Tạo mã xử lý phía máy chủ

Bây giờ, chúng ta cần tạo mã xử lý phía máy chủ để nhận dữ liệu mà chúng ta đã gửi từ giao diện người dùng. Trong ASP.NET, chúng ta có thể sử dụng WebForms hoặc MVC để xử lý dữ liệu này.

Tiếp theo, chúng ta sẽ tạo một file code-behind Backend.aspx.cs và triển khai phương thức xử lý Request. Ví dụ:

“`csharpusing System;using System.Web.Services;

public partial class Backend : System.Web.UI.Page{[WebMethod]public static string SendData(string Name, string Email){// Xử lý dữ liệu ở đây// Ví dụ: Lưu vào cơ sở dữ liệu

return “OK”;}}“`

Trong ví dụ trên, chúng ta sử dụng thuộc tính `[WebMethod]` để biểu thị rằng phương thức `SendData` có thể được gọi từ phía client sử dụng AJAX. Mã xử lý tiếp theo của bạn sẽ được triển khai tùy thuộc vào yêu cầu của ứng dụng của bạn, ví dụ như lưu dữ liệu vào cơ sở dữ liệu.

## FAQs (Các câu hỏi thường gặp)

### 1. Tại sao chúng ta cần sử dụng AJAX để gửi dữ liệu?

Sử dụng AJAX giúp tải dữ liệu và tương tác với máy chủ trở nên mượt mà hơn, mà không cần tải lại toàn bộ trang web. Điều này giúp tăng tốc độ tải trang và cải thiện trải nghiệm người dùng.

### 2. Tôi có thể sử dụng AJAX trong tất cả các ứng dụng ASP.NET không?

Có, bạn có thể sử dụng AJAX trong cả các ứng dụng WebForms và MVC. Không cần quá nhiều câu hỏi đặc biệt, bạn chỉ cần triển khai mã xử lý phía máy chủ và sử dụng AJAX phía client để gửi dữ liệu.

### 3. Tôi cần phải cài đặt thêm bất kỳ thư viện nào để sử dụng AJAX trong ASP.NET không?

Không cần. AJAX là một phần của JavaScript và có sẵn trong mọi trình duyệt hiện đại. Bạn có thể sử dụng pure JavaScript hoặc jQuery (một thư viện JavaScript phổ biến) để dễ dàng gửi dữ liệu bằng AJAX.

Trên đây là cách gửi dữ liệu bằng AJAX trong ASP.NET. Bằng cách sử dụng AJAX, chúng ta có thể gửi dữ liệu một cách nhanh chóng và mượt mà mà không phải tải lại trang web. Nếu bạn muốn tăng hiệu suất và trải nghiệm người dùng của ứng dụng ASP.NET của mình, hãy thử sử dụng AJAX.

Xem thêm tại đây: hanoilaw.vn

jQuery.get( url [, data ] [, success ] [, dataType ] )Returns: jqXHR

Description: Load data from the server using a HTTP GET request.

  • version added: 1.0jQuery.get( url [, data ] [, success ] [, dataType ] )
    • urlType: StringA string containing the URL to which the request is sent.
    • dataType: PlainObject or StringA plain object or string that is sent to the server with the request.
    • successType: Function( PlainObject data, String textStatus, jqXHR jqXHR )A callback function that is executed if the request succeeds. Required if

      dataType

      is provided, but you can use

      null

      or

      jQuery.noop

      as a placeholder.
    • dataTypeType: StringThe type of data expected from the server. Default: Intelligent Guess (xml, json, script, text, html).
  • version added: 1.12-and-2.2jQuery.get( [settings ] )
    • settingsType: PlainObjectA set of key/value pairs that configure the Ajax request. All properties except for

      url

      are optional. A default can be set for any option with $.ajaxSetup(). See jQuery.ajax( settings ) for a complete list of all settings. The type option will automatically be set to

      GET

      .

This is a shorthand Ajax function, which is equivalent to:

The

success

callback function is passed the returned data, which will be an XML root element, text string, JavaScript file, or JSON object, depending on the MIME type of the response. It is also passed the text status of the response.

As of jQuery 1.5, the

success

callback function is also passed a "jqXHR" object (in jQuery 1.4, it was passed the

XMLHttpRequest

object). However, since JSONP and cross-domain GET requests do not use XHR, in those cases the

jqXHR

and

textStatus

parameters passed to the success callback are undefined.

Most implementations will specify a success handler:

This example fetches the requested HTML snippet and inserts it on the page.

The jqXHR Object

As of jQuery 1.5, all of jQuery's Ajax methods return a superset of the

XMLHTTPRequest

object. This jQuery XHR object, or "jqXHR," returned by

$.get()

implements the Promise interface, giving it all the properties, methods, and behavior of a Promise (see Deferred object for more information). The

jqXHR.done()

(for success),

jqXHR.fail()

(for error), and

jqXHR.always()

(for completion, whether success or error; added in jQuery 1.6) methods take a function argument that is called when the request terminates. For information about the arguments this function receives, see the jqXHR Object section of the

$.ajax()

documentation.

The Promise interface also allows jQuery's Ajax methods, including

$.get()

, to chain multiple

.done()

,

.fail()

, and

.always()

callbacks on a single request, and even to assign these callbacks after the request may have completed. If the request is already complete, the callback is fired immediately.

10

11

12

13

14

15

16

17

18

19

20

21

Deprecation Notice

The

jqXHR.success()

,

jqXHR.error()

, and

jqXHR.complete()

callback methods are removed as of jQuery 3.0. You can use

jqXHR.done()

,

jqXHR.fail()

, and

jqXHR.always()

instead.

Additional Notes:

  • Due to browser security restrictions, most "Ajax" requests are subject to the same origin policy; the request can not successfully retrieve data from a different domain, subdomain, port, or protocol.
  • If a request with jQuery.get() returns an error code, it will fail silently unless the script has also called the global

    ajaxError

    event. Alternatively, as of jQuery 1.5, the

    .error()

    method of the

    jqXHR

    object returned by jQuery.get() is also available for error handling.
  • Script and JSONP requests are not subject to the same origin policy restrictions.
jQuery Ajax POST example with PHP | Send data using PHP and AJAX
jQuery Ajax POST example with PHP | Send data using PHP and AJAX

demo_get asp

Trong việc phát triển các ứng dụng web ASP, demo_get asp là một công cụ mạnh mẽ và tiện ích giúp lấy thông tin từ cơ sở dữ liệu và hiển thị nó trên trang web. Trong bài viết này, chúng ta sẽ đi sâu vào demo_get asp, tìm hiểu cách nó hoạt động, và lợi ích mà nó mang lại cho các nhà phát triển ứng dụng.

Demo_get asp là một hàm được sử dụng để thực hiện các truy vấn SQL đến cơ sở dữ liệu và trả về dữ liệu theo yêu cầu của người dùng. Nó giúp tạo ra các truy vấn động để truy cập và xử lý cơ sở dữ liệu. Bằng cách sử dụng demo_get asp, bạn có thể dễ dàng thao tác với cơ sở dữ liệu mà không cần ghi lại mã lặp đi lặp lại.

Một trong những ưu điểm lớn nhất của demo_get asp là nó giúp bạn tiết kiệm thời gian và công sức trong việc xử lý dữ liệu. Với một số lượng lớn các truy vấn SQL cần thực hiện, demo_get asp cho phép bạn kết hợp chúng và thực thi nhanh chóng nhờ tính năng cache dữ liệu. Điều này đảm bảo rằng ứng dụng của bạn hoạt động mượt mà và hiệu quả hơn.

Demo_get asp cũng hỗ trợ kết nối đến các cơ sở dữ liệu khác nhau, bao gồm cả Microsoft Access, SQL Server và MySQL. Điều này đảm bảo tích hợp dễ dàng với các hệ thống cơ sở dữ liệu hiện có mà bạn có thể đã sử dụng. Bạn chỉ cần điều chỉnh mã demo_get asp theo yêu cầu cụ thể của cơ sở dữ liệu của mình và bạn sẽ có thể truy cập dữ liệu một cách dễ dàng và nhanh chóng.

Một trong những trường hợp sử dụng phổ biến của demo_get asp là khi bạn cần lấy thông tin từ cơ sở dữ liệu và hiển thị nó trực tiếp trên trang web của mình. Bằng cách sử dụng demo_get asp, bạn có thể truy xuất và hiển thị dữ liệu bằng các bảng, biểu đồ hoặc danh sách, tùy thuộc vào yêu cầu của mình. Điều này giúp tối ưu hóa trải nghiệm người dùng và tạo ra các trang web tương tác dễ dàng.

Bên cạnh việc truy xuất dữ liệu, demo_get asp cũng hỗ trợ việc thêm, sửa đổi và xóa dữ liệu. Điều này giúp bạn xây dựng các tính năng quản trị cho ứng dụng của bạn. Ví dụ, bạn có thể tạo một giao diện quản lý cho người dùng để thêm mới, chỉnh sửa hoặc xóa các bản ghi trong cơ sở dữ liệu. Demo_get asp giúp bạn thực hiện các thao tác này một cách nhanh chóng và tiện lợi.

FAQs (Câu hỏi thường gặp):

1. Demo_get asp có phải là ngôn ngữ lập trình không?Không, demo_get asp không phải là một ngôn ngữ lập trình. Nó chỉ là một hàm có sẵn trong các công cụ phát triển ứng dụng ASP như Classic ASP hoặc ASP.NET. Demo_get asp giúp bạn tương tác với cơ sở dữ liệu một cách dễ dàng thông qua các tập lệnh SQL.

2. Demo_get asp có an toàn không?Demo_get asp cung cấp các lớp bảo mật mạnh mẽ để đảm bảo an toàn cho dữ liệu của bạn. Tuy nhiên, việc triển khai các biện pháp bảo mật bổ sung như xử lý thẻ vàng (SQL Injection) hoặc kiểm tra quyền truy cập là rất quan trọng để tránh việc lạm dụng demo_get asp và bảo về dữ liệu của bạn.

3. Tôi có thể sử dụng demo_get asp trên các hệ điều hành khác nhau không?Demo_get asp hoạt động trên các máy chủ web hỗ trợ ASP nhưng không phụ thuộc vào hệ điều hành. Bạn có thể sử dụng nó trên các máy chủ web chạy trên Windows hoặc Linux, miễn là nó hỗ trợ ASP.

4. Demo_get asp có hỗ trợ truy vấn đến nhiều cơ sở dữ liệu không?Có, demo_get asp hỗ trợ kết nối và thực thi các truy vấn đến nhiều cơ sở dữ liệu khác nhau như Microsoft Access, SQL Server, MySQL và nhiều hơn nữa. Bạn có thể chọn cơ sở dữ liệu mà bạn muốn làm việc với dễ dàng bằng cách điều chỉnh mã demo_get asp của mình.

Trong bài viết này, chúng ta đã tìm hiểu về demo_get asp và các lợi ích mà nó mang lại cho việc phát triển ứng dụng ASP. Demo_get asp giúp bạn tiết kiệm thời gian và công sức thông qua tính năng cache dữ liệu, tương thích với nhiều cơ sở dữ liệu và hỗ trợ các tác vụ quản lý dữ liệu. Dù bạn là một nhà phát triển ứng dụng mới hay đã có kinh nghiệm, demo_get asp là một công cụ hữu ích mà bạn nên cân nhắc sử dụng trong quy trình phát triển của mình.

Hình ảnh liên quan đến chủ đề classic asp jquery ajax post example

Link bài viết: classic asp jquery ajax post example.

Xem thêm thông tin về bài chủ đề này classic asp jquery ajax post example.

  • ajax post getting value in CLASSIC asp – Stack Overflow
  • Ajax with Classic ASP using jQuery – Mikesdotnetting
  • AJAX and ASP – W3Schools
  • jQuery AJAX get() and post() Methods – W3Schools
  • How To Post Data To The Controller Using AJAX With Validations In …
  • How To Insert And Retrieve Data Using jQuery AJAX In ASP.NET
  • ASP AJAX – W3Schools
  • Using Classic ASP and AJAX to Check Availability of a …
  • jQuery, AJAX, and Classic ASP – Random Acts of Coding
  • [Script]-Return ASP Classic Variable to JQuery Ajax
  • Ajax With Classic ASP Using Jquery | PDF – Scribd
  • Classic ASP and AJAX – Javascript – Bytes
  • jQuery in Classic ASP
  • classic asp ajax post json data – 稀土掘金

Xem thêm: https://hanoilaw.vn/category/blog blog

I am trying to learn a way to send data to classic asp via ajax jsonthe asp page had been successfully called by json, but the issue is data unable to reach back side, therefore database is unable to modify according to revised sort

front side

back side I use classic ASPbut I am unable to obtain the data in dataHow can I make it?


<% Set conn = Server.CreateObject("ADODB.Connection") DBPath = Server.MapPath("wawaaddatatable.mdb") conn.Open "provider=Microsoft.Jet.OLEDB.4.0;Data Source=" & DBPath if request.QueryString("action")="update" then Response.ContentType = "application/json" Set rs = Server.CreateObject("ADODB.Recordset") rs.open "Select * From images ",conn,1,3 rs.addnew rs("sort")=request.form("sort") rs("upload_date")=date() rs("filename")="abc.jpg" rs.update rs.close end if %>

jQuery - AJAX get() and post() Methods

The jQuery get() and post() methods are used to request data from the server with an HTTP GET or POST request.

Keywords searched by users: classic asp jquery ajax post example

Asp.Net Ajax File Upload Using Jquery File Upload Plugin | I Came, I  Learned, I Blogged
Asp.Net Ajax File Upload Using Jquery File Upload Plugin | I Came, I Learned, I Blogged
Posting Javascript Types To Mvc 6 In .Net Core, Using Ajax | I Came, I  Learned, I Blogged
Posting Javascript Types To Mvc 6 In .Net Core, Using Ajax | I Came, I Learned, I Blogged
Asp.Net Mvc: Ajax Dialog Form Using Jquery Ui | Nick Olsen'S Programming  Tips
Asp.Net Mvc: Ajax Dialog Form Using Jquery Ui | Nick Olsen'S Programming Tips
Asp.Net Mvc Partial View And Ajax “Real World” Example | I Came, I Learned,  I Blogged
Asp.Net Mvc Partial View And Ajax “Real World” Example | I Came, I Learned, I Blogged
Jquery Ajax Post | How Does Jquery Ajax Post Work With Examples?
Jquery Ajax Post | How Does Jquery Ajax Post Work With Examples?
Posting Javascript Types To Mvc 6 In .Net Core, Using Ajax | I Came, I  Learned, I Blogged
Posting Javascript Types To Mvc 6 In .Net Core, Using Ajax | I Came, I Learned, I Blogged
Jquery Ajax Post | How Does Jquery Ajax Post Work With Examples?
Jquery Ajax Post | How Does Jquery Ajax Post Work With Examples?
Asp Ajax
Asp Ajax
Classic Asp And Mvc - Codeproject
Classic Asp And Mvc - Codeproject
Ajax Using Jquery And Asp | Pdf | J Query | Ajax (Programming)
Ajax Using Jquery And Asp | Pdf | J Query | Ajax (Programming)
Jquery | Matt'S Work Blog
Jquery | Matt'S Work Blog

See more here: kientrucannam.vn

Leave a Reply

Your email address will not be published. Required fields are marked *