thinkphp Ajax Additions and deletions

Last Update:2016-10-27 Source: Internet

Author: User

Tags button type

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

Written in front of the words: should customer needs to add self-help to the background of the movie name and link function, added in the foreground can automatically read the display.

Development steps:

1, because is to add a movie and movie link to the background function, so the controller under the admin.

Create a new controller under path Application\lib\action\admin MvaddAction.class.php

The controller All code is as follows:

<?php
When you access this page after inheriting publicaction, you must first log in to the background
Class Mvaddaction extends Publicaction {
Public Function index () {
$result = M ("movie")->select ();
Var_dump ($result); exit;
$this->assign ("name", $result);
$this->display ();

}

Public function Add () {
$data ["mvname"] = $_post["name"];
$data ["mvlink"] = $_post["Mvlink"];
$result = M ("movie")->add ($data);
if ($result) {
$this->ajaxreturn ($result, "new success! ", 1);
echo "OK";
}
}
Public Function del () {
$id = $_post[' id '];
$result = M ("movie")->where (Array ("id" = $id))->delete ();
if ($result) {
$this->ajaxreturn ($result, "Delete succeeded! ", 1);
}

}

Public function Show () {
$id = $_get[' id '];
$link = M ("movie")->where (Array ("id" = $id))->find ();
$this->assign ("link", $link [' Mvlink ']);
$this->display ();
}

}

2. Add a template

Add a static page template under the Application\tpl\admin\mvadd directory index.html

A static page is a page that has been fully developed.

Front-end frame with bootstrap

<! DOCTYPE html>
<meta name= "viewport" content= "Width=device-width, initial-scale=1, maximum-scale=1, User-scalable=no" >
<link href= "//cdn.bootcss.com/bootstrap/4.0.0-alpha.4/css/bootstrap.css" rel= "stylesheet" >
<script src= "Http://www1.qixoo.com/jquery-1.4.1.min.js" ></script>
<body>
<form role= "Form" action= "#" >
<div class= "Form-group" >
<label for= "ExampleInputEmail1" > Movie name </label>
<input type= "text" class= "Form-control" id= "mvname" placeholder= "Please enter movie name such as: Fine movie" >
</div>
<div class= "Form-group" >
<label for= "ExampleInputPassword1" > Movie links </label>
<input type= "text" class= "Form-control" id= "Mvlink" placeholder= "movie Link: http://www.029gc.cn" >
</div>
<button type= "button" id= "Add" class= "btn btn-primary btn-lg btn-block" style= "Width:20%;align:center;" > Save </button>
</form>
<table class= "Table table-bordered" >
&LT;TR id= "tr" ><td> name </td><td> links </td><td> Actions </td></tr>
<foreach name= "name" item= "VO" >
<tr id= "{$vo. Id}tr" ><td>{$vo. mvname}</td><td>{$vo. Mvlink}</td><td><a href = "Javascript:void (0)" Onclick=dellink ({$vo. ID});> delete </a></td></tr>
</foreach>

</table>

</body>
<script type=text/javascript>
$ ("#add"). Click (function () {
var name = $ ("#mvname"). Val ();
var link = $ ("#mvlink"). Val ();
if (name== "" | | link== "") {
Alert ("Movie name or link cannot be empty");
Return
}else{
$.ajax ({
URL: ".. /index.php?g=admin&m=mvadd&a=add ",
Type: "POST",
data:{"name": Name, "Mvlink": Link},
DataType: "JSON",
Error:function () {
Alert (' Error loading XML document ');
},
Success:function (data) {
alert (data.info);
$ ("#tr"). After ("<tr id=" +data.data+ "tr><td>" +name+ "</td><td>" +link+ "</td><td ><a href= ' javascript:void (0) ' Onclick=dellink1 ("+data.data+");> delete </a></td></tr> ")
}
});
}
});

function Dellink (ID) {
$.ajax ({
URL: ".. /index.php?g=admin&m=mvadd&a=del ",
Type: "POST",
data:{"id": ID},
DataType: "JSON",
Error:function () {
Alert (' Error loading XML document ');
},
Success:function (data) {
alert (data.info);
$ ("#" +id+ "tr"). Remove ();
}
});

}
</SCRIPT>

Technical points:

Dynamically add and delete data from a table.

thinkphp Ajax Additions and deletions

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

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

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

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

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More