Home > Backend Development > PHP Tutorial > php +ajax +sql 实现数据交互

php +ajax +sql 实现数据交互

WBOY
Release: 2016-06-23 13:36:24
Original
905 people have browsed it

1.首先新建个sql表,表内容如上所示:


2.新建个公用文件conn.php来链接数据库:

<strong><?php </strong> header(<strong>"Content-Type:text/html;charset=utf8"</strong>);//申明编码格式 $conn=mysql_connect(<strong>"localhost"</strong>,<strong>"root"</strong>,<strong>"aaaaaa"</strong>) <strong>or die</strong>(<strong>"</strong><strong>数据库连接错误</strong><strong>"</strong>.mysql_errno());//连接sql mysql_select_db(<strong>"phptest"</strong>,$conn); mysql_query(<strong>'SET NAMES UTF8'</strong>) <strong>or die</strong>(<strong>'</strong><strong>字符集设置错误</strong><strong>'</strong>.mysql_error());//设置输入的字符集编码 <strong>?></strong></strong>
Copy after login
<strong>3.php服务端提供给前端ajax数据接口,新建文件phptoAJAX。php</strong>
Copy after login
<pre class="n"><strong><?php</strong> <strong>require_once</strong>(<strong>"conn.php"</strong>);//导入公用文件 $query=mysql_query(<strong>"SElECT * FROM txt"</strong>) <strong>or die</strong>(<strong>"</strong><strong>错误提示:</strong><strong>"</strong>.mysql_error()); $jsonArray=<strong>array</strong>();//新建数据用于接收数据库每行对应的数据组 <strong>while</strong>($rows=mysql_fetch_array($query)) {
Copy after login
 //处理数据库里面的自动对应的内容  $rows[<strong>'content'</strong>]=mb_substr(strip_tags(htmlspecialchars_decode($rows[<strong>'content'</strong>])),0,100,<strong>"utf-8"</strong>);  //把数据库的内容添加到新建数组中  
Copy after login
 array_push($jsonArray,$rows);//注意这里是$rows  } <strong>echo </strong>json_encode($jsonArray);//转换成json传递给前端
Copy after login
4.新建phpToAJAX.HTML前端接收数据,这里我用jquery封装好的ajax方法,执行后的页面如下图所示:
Copy after login
<pre class="n"><!DOCTYPE <strong>html</strong>><<strong>html</strong>><<strong>head </strong><strong>lang=</strong><strong>"en"</strong>>    <<strong>meta </strong><strong>charset=</strong><strong>"UTF-8"</strong>>    <<strong>title</strong>></<strong>title</strong>>    <<strong>script </strong><strong>type=</strong><strong>"text/javascript" </strong><strong>src=</strong><strong>"jquery-1.8.3.min.js"</strong>></<strong>script</strong>></<strong>head</strong>><<strong>body</strong>><<strong>ul </strong><strong>id=</strong><strong>"list"</strong>><pre class="n">  <!--数据将在这里显示-->
Copy after login
ul><script type="text/javascript"> $(function(){ $.ajax({ type: "post",//传递方法 url: "phpToAJAX.php",//数据接口 dataType: "json",//接收格式 success: function(msg)//如果接收成功执行以下 { var li=""; for(var i =0;ilength-1;i++)//这里是限定10个 { li+="
  • "+msg[i]['title']+"

    "+msg[i]['content']+"...]+"' target='_blank'>详细

  • "; } $("#list").html(li); }, error:function()//如果接收不成功执行以下
                {                    console.log(<strong>"</strong><strong>链接错误</strong><strong>"</strong>)            }        });    });</<strong>script</strong>></<strong>body</strong>></<strong>html</strong>>
    Copy after login
    5.点击上一步图中所示的“详细”链接,可查看对应的文章内容,新建phpArtcle.php文件
    Copy after login
    <strong><?php</strong> <strong>require_once</strong>(<strong>"conn.php"</strong>); $id=$_GET[<strong>'art'</strong>];//接收前端上传的数据
    Copy after login
    <pre class="n">//查询数据库对应的内容
    Copy after login
    $query=mysql_query("SELECT * FROM txt WHERE  id='$id'") or die("文章错误:".mysql_error());
    Copy after login
    //遍历数组,显示内容
    Copy after login
    if($rows=mysql_fetch_array($query)){ echo "

    ".$rows['title']."

    "; echo "
    ".htmlspecialchars_decode($rows['content'])."
    ";}

    ------------------- 完毕 -----------------------




    source:php.cn
    Statement of this Website
    The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
    Popular Tutorials
    More>
    Latest Downloads
    More>
    Web Effects
    Website Source Code
    Website Materials
    Front End Template