H5學習之--前端和PHP后端的簡單交互

最近在學習前端的東西，H5+CSS3+JS，又分別學習了原生JS和jQuery庫，還有Bootstrap框架，因為我是做ios開發的，所以先熟悉WebApp相關的開發知識，其他的學習資料，網上有很多的學習資料，學到交互這塊了，簡單做個記錄！

代碼如下：

1，導入jQuery和Bootstrap，不過就簡單寫了點東西，所以沒有用到Bootstrap，我隨便導入了個CDN，不過公司的前端開發說，他們一般是把jQuery和Bootstrap下載一個版本，放到服務器上，這樣訪問速度快，不連網的情況下，不至於什么都加載不出來，

<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script>
<script src="index4.js"></script>

2，簡單的書寫一個form表單

<form role="form">
        <div class="form-control">

            <label>郵箱：</label>
            <input type="text" class="hname"
                   placeholder="請輸入您的郵箱地址">
            <label>密碼：</label>
            <input type="text" class="hpassword"
                   placeholder="請輸入您的郵箱密碼">

        </div>


    </form>

    <button type="button" class="btn btn-default hb">提交</button>

    <label class="res"></label>

在這里，label是為了把傳到后台的東西，再通過后台傳過來，展示到上面！

3，js相關代碼

$(function () {
    $(".hb").click(function () {
       var name = $(".hname").val();
       var psd = $(".hpassword").val();
       if (name == "" || name == null)
       {
           alert("用戶名不能為空");
       }else if (psd == "" || psd == null)
        {
            alert("密碼不能為空");
        }else {
            $.post("http://192.168.0.137:809/index.php",{'username':name,'password':psd},function (data) {
               $('.res').html(data);
               // alert(data);
            });
       }
    });
});

4，然后我使用MAMP PRO（網上有破解版的資源）在自己本機上構建了個后台的環境，這樣可以實現前后台交互，如下圖：

服務器后台配置：

把寫好的文件，放到配置好的后台里，然后通過配置好的路徑進行訪問，即可！

5，測試下，如下圖：

完成！