


Jquery uses Firefox FireBug plug-in to debug Ajax steps explained_jquery
First, we use an example to illustrate JQuery’s Ajax calling process,
One function implemented is: after clicking the confirm payment button, the balance payment function is implemented:
1. First bind the relevant functions that need to be called to the button on the php page:
$(function(){
$("#pay_btn").bind("click",ABC.balancePay);
});
2. Script Office:
If using $.post method:
var ABC = {
balancePay: function(event){
event.preventDefault();
var tthis = $(event.currentTarget);
var form = tthis.parents(‘form’);
var url = form.attr(‘action’);
var data = ‘code=15′ ;// $(‘#verifyCode’).val();
var jqXhr = $.post(url, data, undefined, ‘jsonp’);
jqXhr.done(function(datas){
//console.log('This is printed through the console'); //#4
$("#msg").text('Result:' data);
});
}
$.post method can also directly specify the callback function:
var jqXhr = $.post(url, data, function (data){
$("#msg").text('Result:' data);
}, 'jsonp');
Use $.ajax method to achieve:
var jqXhr = $.post(url, data, function (data){
$("#msg").text('Result:' data);
}, ‘jsonp’);
Use $.ajax method to achieve:
var jqXhr = $.ajax({
type: ‘post’,
url: url,
data: {code: ‘15′},
dataType: ‘jsonp’,
sccuess:function(data){
alert(‘good’);},
error: function(XMLHttpRequest, textStatus, errorThrown) { // #3 This error function is very useful for debugging. If the parsing is incorrect, an error box will pop up. alert (XMLHttpRequest.readyState);
;
});
3. Server side:
Copy code
public function actionInterPayProc($callback)
{
//header("content-type: text/javascript");
//header(‘Content-type: text/html; charset=utf-8′);
$code = $_POST['code'];
//$code //#1 此处给出一个有语法错误的表达式
//echo $code; //#2 此处标记,用于后面调试说明;
…
$result = 1;
//echo $_POST['callback']. ‘(‘ . json_encode($result) . ‘);';//注意使用的编码方式需要和客户端请求保持一致;
exit(0);
}
调试工具
Firefox有强大FireBug 插件,现在比较新的浏览器如 Chrome 和 Safari,以及 IE 8都内置了调试工具,借助于这些调试工具,可以非常详细的查看 Ajax 的执行过程(chrome和firefox中调出调试工具的快捷键是ctrl+shift+c);
以下使用FireBug;
1.使用firebug,查看回调:
对于Ajax方法,是通过异步执行的服务器端程序,如果服务器端出错,在页面上不会显示的,我们需要借助调试工具来查看;例如,将以上示例中#2的注释去掉,触发ajax请求一次,可以在控制台面板中查看到错误的返回结果:
![]() |
If there is an error in the server-side program, you can also see it directly. The cause of the error is the same as that of an ordinary page, but it is just viewed in the panel returned by ajax (nothing will be displayed in the web browser page).
It should be noted here that if echo and other methods are used on the server side to print out the variables that need to be viewed, then the result of the ajax call must fail, because the name of the callback function has been changed. It cannot be parsed;
For example, if the printed variable is 333, then the final callback result is: 333ajaxcallbak(1); the client is looking for the function name 333ajaxcallbak and cannot parse it.
2. Use the error function to print error information:
$.ajax() has an error parameter, which can specify a function. This method will be called when the request fails. The information given here is very useful for debugging;
error: function (XMLHttpRequest, textStatus, errorThrown)
The first parameter XMLHttpRequest returned by the error event has some useful information:
XMLHttpRequest.readyState:
The status code returned corresponds to an error description:
Status code
0 - (uninitialized) the send() method has not been called yet
1 - (Loading) The send() method has been called and the request is being sent
2 - (Loading completed) The send() method has been executed and all response content has been received
3 - (Interactive) Parsing response content
4 - (Complete) The response content parsing is completed and can be called on the client
XMLHttpRequest.status:
The status code returned here is the HTTP status we see every day; such as 404, which means the page was not found;
textStatus:
"timeout", "error", "notmodified" and "parsererror".
(Default: automatic judgment (xml or html)) The time to call when the request fails. There are three parameters: XMLHttpRequest object, error message, and (optional) captured error object. If an error occurs, the error message (the second parameter) may be "timeout", "error", "notmodified" and "parsererror" in addition to null.
Through this error function, it is easy to troubleshoot program errors;
For example, in #2 above, removing the comment is equivalent to changing the callback function name; in error, it will report: parsererror;
3. Use console.log to print output: (alert() can also be used)
This is just a auxiliary method to enhance the debugging experience. For tracking variables of interest in js, we can print them out through the alert() method, but frequent pop-up boxes will make people irritated. console.log is an alternative, it is a method of the firebug plugin. The variable results printed by console.log will be displayed in the firebug console panel;
Possible reasons for the error:
1. If the format of the returned result is incorrect, you can see the result in firebug;
2. For JSON requests, the format is strict:
If the error reported through the error function is: parsererror
The possible reason is the problem of server-side script encoding; you can add the corresponding header information to the first line processed in the server-side processing function:
eg: header('Content-type: text/html; charset=utf-8');
Of course, most likely the format is incorrect:
echo "{'re':'success'}" ;jquery cannot parse
echo "{"re":"success"}"; there will be no error
Do not output weird json format strings, otherwise the jq1.4 version will not execute the success callback. For example, {abc:1} or {'abc':1}, to output
{"abc":1}
{'success':true} was changed to {"success":true}

Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Hot Tools

Notepad++7.3.1
Easy-to-use and free code editor

SublimeText3 Chinese version
Chinese version, very easy to use

Zend Studio 13.0.1
Powerful PHP integrated development environment

Dreamweaver CS6
Visual web development tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)

Hot Topics











Build an autocomplete suggestion engine using PHP and Ajax: Server-side script: handles Ajax requests and returns suggestions (autocomplete.php). Client script: Send Ajax request and display suggestions (autocomplete.js). Practical case: Include script in HTML page and specify search-input element identifier.

How to use PUT request method in jQuery? In jQuery, the method of sending a PUT request is similar to sending other types of requests, but you need to pay attention to some details and parameter settings. PUT requests are typically used to update resources, such as updating data in a database or updating files on the server. The following is a specific code example using the PUT request method in jQuery. First, make sure you include the jQuery library file, then you can send a PUT request via: $.ajax({u

Using Ajax to obtain variables from PHP methods is a common scenario in web development. Through Ajax, the page can be dynamically obtained without refreshing the data. In this article, we will introduce how to use Ajax to get variables from PHP methods, and provide specific code examples. First, we need to write a PHP file to handle the Ajax request and return the required variables. Here is sample code for a simple PHP file getData.php:

Title: jQuery Tips: Quickly modify the text of all a tags on the page In web development, we often need to modify and operate elements on the page. When using jQuery, sometimes you need to modify the text content of all a tags in the page at once, which can save time and energy. The following will introduce how to use jQuery to quickly modify the text of all a tags on the page, and give specific code examples. First, we need to introduce the jQuery library file and ensure that the following code is introduced into the page: <

Title: Use jQuery to modify the text content of all a tags. jQuery is a popular JavaScript library that is widely used to handle DOM operations. In web development, we often encounter the need to modify the text content of the link tag (a tag) on the page. This article will explain how to use jQuery to achieve this goal, and provide specific code examples. First, we need to introduce the jQuery library into the page. Add the following code in the HTML file:

Ajax (Asynchronous JavaScript and XML) allows adding dynamic content without reloading the page. Using PHP and Ajax, you can dynamically load a product list: HTML creates a page with a container element, and the Ajax request adds the data to that element after loading it. JavaScript uses Ajax to send a request to the server through XMLHttpRequest to obtain product data in JSON format from the server. PHP uses MySQL to query product data from the database and encode it into JSON format. JavaScript parses the JSON data and displays it in the page container. Clicking the button triggers an Ajax request to load the product list.

jQuery is a popular JavaScript library that is widely used to handle DOM manipulation and event handling in web pages. In jQuery, the eq() method is used to select elements at a specified index position. The specific usage and application scenarios are as follows. In jQuery, the eq() method selects the element at a specified index position. Index positions start counting from 0, i.e. the index of the first element is 0, the index of the second element is 1, and so on. The syntax of the eq() method is as follows: $("s

In order to improve Ajax security, there are several methods: CSRF protection: generate a token and send it to the client, add it to the server side in the request for verification. XSS protection: Use htmlspecialchars() to filter input to prevent malicious script injection. Content-Security-Policy header: Restrict the loading of malicious resources and specify the sources from which scripts and style sheets are allowed to be loaded. Validate server-side input: Validate input received from Ajax requests to prevent attackers from exploiting input vulnerabilities. Use secure Ajax libraries: Take advantage of automatic CSRF protection modules provided by libraries such as jQuery.
