angularjs post返回html_超哥带你体验angularJS

作者：潘必超

AngularJS并不是什么遥不可及的东西，也不是很很高深的框架。如果你略懂JS，我相信你应该很容易就能入门(如果你要实现这个Demo，那么你也要略懂php)。下面就用一个“查询电话号码”的Demo来领略一下吧。

我采用了3种主要的方式来实现这个查询过程，分别是：

1)经典表单提交；

2)JQuery异步请求；

3)Angular异步请求；

1、经典表单提交

点击上方的“查询”按钮，网页将从testgetinfo.html跳转到getPhoneInfo.php。在getPhoneInfo.php执行了数据库查询，返回一句JSON。

来看看前端，一句Javascript都不用写。哇，多爽，不懂Javascript小开心了片刻。但是这样的页面跳转所带来的白屏体验并不是什么好事。

输入要查询的人的姓名

(备注，从服务器数据库中执行查询的代码在getPhoneInfo.php中，这里不详细描述。)

2、JQuery异步请求

JQuery在前端的应用可以说是家喻户晓啊。下面这是个html页面jqForm.html实现了查询电话号码功能，点击查询按钮，无须跳页，在当前页面下方显示了服务器返回的结果。用户体验就相对较好。因为用户需要的是结果(电话号码)，而页面跳转这个过程并不是用户所希望要的。只是码农们需要为此付出多一点点的牺牲。

下面，我们看看前端代码多做了哪些改变呢？

输入要查询的人的姓名