php与ajax(jquery)示例

来源:互联网 发布:mac触摸板透明 编辑:程序博客网 时间:2024/06/16 18:21

环境准备

1.开发工具Phpstorm2.php开发环境包xampp3.juqery.min.js依赖

代码实现

请求页面:html
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>ajax_index</title>    <script src="jquery-3.1.1.min.js"></script>    <script src="ajaxindex.js"></script></head><body><input type="text" id="namevalue" style="margin: 10px;padding: 5px;" placeholder="请输入用户名"><br/><br/><button id="btn" style="margin-left: 10px;padding: 5px;border-radius: 6px;">send</button><hr/><br/>結果是:<span id="result"></span></body></html>

按钮监听时间js:

$(document).ready(function () {    $("#btn").on("click", function () {        $("#result").text("正在通讯中...");        //此处为是两种实现的方法      /* $.get("server.php", {name: $("#namevalue").val()}, function (data) {            $("#result").text(data);        }).error(function () {                $("#result").text("通讯错误!")            }        )*/        $.ajax({         url: "server.php",         data: {name:$("#namevalue").val()},         success: function (data) {            $("#result").text(data);         },         error:function () {            $("#result").text("通讯错误!")         }         });    })});

模拟服务处理:server.php

<?php/** * Created by PhpStorm. * User: SF * Date: 2016/10/10  * Time: 10:59 */if (isset($_GET['name'])) {    echo 'hello:' . $_GET['name'];} else {    echo "Args Error";}?>
原创粉丝点击