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，测试下，如下图：

完成！