Ajax deletion in jQuery

Source: Internet
Author: User

Ajax deletion in jQuery

Ajax is a partial refresh. Implementation with jQuery is much simpler. The following is a detailed description, combined with an ajax deletion case.

First, check the html interface code:

 

<A href = "javascript:;" onclick = "delete_order ('<? Php echo $ item [order_id];?> ') "> </a> this image link indicates deletion. It does not jump to an interface, but starts the click event when you click it.

 

Click the event to run the delete_order () method. This method passes a parameter, the order number. With this parameter, you can perform the corresponding delete operation.

 

The following jQuery code:

The Code is as follows:

<Script>

Function delete_order (order_id ){

Confirm _ = confirm ('This action will delete current order! Are you sure? ');

If (confirm _){

$. Ajax ({

Type: "POST ",

Url: 'index. php/admin/order/del/'+ order_id,

Success: function (msg ){

// Alert ("test order ");

// All delete is success, this can be execute

$ ("# Tr _" + order_id). remove ();

}

});

}

};

</Script>

 

Start with a prompt box. Are you sure you want to delete it?

 

If yes, perform the ajax operation.

 

In jQuery, there is a $. ajax () method.

 

Here there are three parameters, one of which is type, where POST is used,

 

The second is the address, which is critical. It is responsible for transmitting data to the backend server for execution.

 

The third parameter is a callback function. If the deletion is successful, the operation is performed. At this time, you can perform some actions, such as removing the deleted record. The following line of code is used. Assign a dynamic id for no records as the basis for deletion. Note that the callback function will be executed only after all the operations in the background are successful.

 

<Tr id = "tr _ <? Php echo $ item ['order _ id'];?> "> </Tr>

 

The following is the code executed in the background.

 

The Code is as follows:

Function del (){

$ Order_id = $ this-> uri-> segment (4 );

If ($ order_id> 0 ){

$ This-> db-> delete ('billing', array ('order _ id' => $ order_id ));

$ This-> db-> delete ('shipping _ address', array ('order _ id' => $ order_id ));

$ This-> db-> delete ('order _ products', array ('order _ id' => $ order_id ));

$ This-> db-> delete ('comments', array ('order _ id' => $ order_id ));

}

$ This-> db-> delete ($ this-> tbname, array ('id' => $ order_id ));

}

 

A Method in the background controller obtains the parameter through $ this-> uri-> segment (); and assigns the parameter to the variable order_id.

 

Then, you can perform corresponding deletion operations in the background. If the deletion is successful, a default message is sent to the success method.

 

The reason why the success method fails to be executed today is that the deletion operation fails and the hidden information cannot be passed to the success method. Why is it unsuccessful? Because $ this-> db-> delete ('shipping _ address', array ('order _ id' => $ order_id); does not match the table name in the database, it was probably modified by someone else.

 

After the modification, the success method was successfully executed.

 

 

This is a simple ajax instance. It can briefly describe the role of ajax. You do not need to refresh the interface and secretly go to the background to perform the operation. After the operation is successful, you can also perform the corresponding action to complete it through jQuery.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.