Ajax: modifying and adding functions to the database (relatively simple)

Source: Internet
Author: User

Ajax: modifying and adding functions to the database (relatively simple)

Modifying and adding information about databases can be used for any addition or modification of these databases.

1. display information in the database

(1) The display effect can also be displayed on the bootstrap tab (bootstrap must be introduced before)

<Ul id = "myTab" class = "nav-tabs"> <li class = "active" style = "font-size: 30px "> <a href =" # home "rel =" external nofollow "data-toggle =" tab "> meal class </a> </li> <li style =" font-size: 30px "> <a href =" # ios "rel =" external nofollow "data-toggle =" tab "> special snacks </a> </li> <li class =" dropdown "style =" font-size: 30px "> <a href =" # "rel =" external nofollow "id =" myTabDrop1 "class =" dropdown-toggle "data-toggle =" dropdown "> liquor & drinks <B class = "caret"> </B> </a> <ul class = "dropdown-menu" role = "menu" aria-labelledby = "myTabDrop1" style = "font- size: 25px "> <li> <a href =" # jmeter "rel =" external nofollow "tabindex ="-1 "data-toggle =" tab "> drinks </a> </li> <a href = "# ejb" rel = "external nofollow" tabindex = "-1" data-toggle = "tab"> drinks </a> </li> </ul> </li> </ul>

Ii. modify content

(1) After the title is displayed, it is the content of each title. You can use ajax to traverse

<p id="mian"> </p>

(2) database Traversal

$. Ajax ({url: "mianlei. php ", // write the processing page dataType:" TEXT ", success: function (d) {var hang = d. split ("|"); // split character "|" string: Display line var str = ""; for (var I = 0; I 

(3) Compile the processing page as follows:

<? Phpinclude ("DBDA. php "); // call the encapsulated Database Class $ db = new DBDA (); $ SQL =" select * from caidan where fcode = ('20140901 ')"; // query all information that matches the parent number echo $ db-> StrQuery ($ SQL); // output the result

(4) The modified content can be in a modal box.

<Div class = "modal fade" id = "myModal" tabindex = "-1" role = "dialog" aria-labelledby = "myModalLabel" aria-hidden = "true"> <div class = "modal-dialog"> <div class = "modal-content"> <div class = "modal-header"> <button type = "button" class = "close "data-dismiss =" modal "aria-hidden =" true "> × </button> 

(5) The original name and price should be displayed by default during the modification, so the Code previously traversed should be passed over.

$ (". Aa1 "). click (function () {var code = $ (this ). attr ("code"); // locate the code value $. ajax ({url: "xiugaichuli. php ", // write the processing page data: {c: code}, // pass the code value to type:" POST ", dataType:" TEXT ", success: function (d) {var hang = d. split ("|"); // split character "|" string: Display line var str = ""; for (var I = 0; I 

(6) Click the submit button and write the data to the database. The modification is also made here. Click the submit button to modify the data.

$ ("# Tijiao "). click (function () {var code = $ (". name "). attr ("code"); // find the code in the name var code = $ (". price "). attr ("code"); // find the price code var name = $ (". name "). val (); // find the name value var price = $ (". price "). val (); // locate the price value $. ajax ({url: "tjsk. php ", // write data: {n: name, p: price, c: code} For the processing page, // upload the value to the processing page type:" POST ", dataType: "TEXT", success: function (data) {// output if (data. trim () = "OK") {alert ("modified successfully! ");}}})})


3. Add content

(1) create a dialog box with a text box.

<Div id = "tianjia" data-toggle = 'modal' data-target = '# mymodall'> Add course </div> <div class = "modal-content"> <div class = "modal-header"> <button type = "button" class = "close" data-dismiss = "modal" aria-hidden = "true"> × </button> 

(2) after entering the information, click Submit to write data to the database.

$ ("# Tijiao1 "). click (function () {var n = $ ("# ming "). val (); // find the value of the Name text box j = $ ("# jia "). val (); // find the value of the price text box $. ajax ({url: "tianjia. php ", // compile the processing page data: {n: n, j: j}, // pass the value to type:" POST ", dataType:" TEXT ", success: function (d) {if (d. trim () = "OK") {alert ("added successfully! ");} Window. location. href =" xiugaicanpin. php "rel =" external nofollow ";}})})

(3) Compile the processing page

<? Php include ("DBDA. php "); $ db = new DBDA (); $ n = $ _ POST [" n "]; // receive the sent value $ j =$ _ POST ["j"]; $ SQL = "select max (code) from caidan where fcode = '20140901 '"; // find the maximum code of this parent code $ attr = $ db-> Query ($ SQL); foreach ($ attr as $ v) {$ c = $ v [0] + 1; // Add the maximum value to 1 $ sqll = "insert into caidan values ('{$ j }', '{$ c}', '{$ n}', '000000 ','','','')"; // write data to the database $ db-> Query ($ sqll, 0); echo "OK" ;}?>

(4) view the results after adding

Now, it's over. Simple addition and modification features will be added later ~~

The preceding section describes how to modify and add a database using Ajax (simple answer). I hope it will be helpful to you. If you have any questions, please leave a message, the editor will reply to you in a timely manner. Thank you very much for your support for the help House website!

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.