ajax() get() post() map() join()

最新推荐文章于 2022-10-26 19:01:11 发布

churanlu1875

最新推荐文章于 2022-10-26 19:01:11 发布

阅读量139

点赞数

文章标签： json php javascript ViewUI

原文链接：https://my.oschina.net/u/3427060/blog/920525

版权

菜鸟：http://www.runoob.com/http/http-tutorial.html

慕课：http://www.imooc.com/video/5648

http://www.imooc.com/code/13471

get：请求主要是获取信息用URL传递参数，所以都可见，因此不安全，因此有信息数量有限制，2000字符。

post：一般修改服务器资源，对他人不可见在请求体中信息数量无限制一般是修改查看……

使用get()方法时，采用GET方式向服务器请求数据，并通过方法中回调函数的参数返回请求的数据，它的调用格式如下：

$.get(url,[callback])

参数url为服务器请求地址，可选项callback参数为请求成功后执行的回调函数。

 $(function () {
   $("#btnShow").bind("click", function () {
                    var $this = $(this);
                    $.get("/data/info_f.php", function(data) {
                        $this.attr("disabled", "true");
                        $("ul").append("<li>我的名字叫：" + data.name + "</li>");
                        $("ul").append("<li>男朋友对我说：" + data.say + "</li>");
                    }, "json");
                })
            });

与get()方法相比，post()方法多用于以POST方式向服务器发送数据，服务器接收到数据之后，进行处理，并将处理结果返回页面，调用格式如下：

$.post(url,[data],[callback])

参数url为服务器请求地址，可选项data为向服务器请求时发送的数据，可选项callback参数为请求成功后执行的回调函数。

<body>
        <div id="divtest">
            <div class="title">
                <span class="fl">检测数字是否大于0</span> 
                <span class="fr"><input id="btnCheck" type="button" value="检测" /></span>
            </div>
            <ul>
               <li>请求输入一个数字 <input id="txtNumber" type="text" size="12" /></li>
            </ul>
        </div>
        
        <script type="text/javascript">
            $(function () {
                $("#btnCheck").bind("click", function () {
                    $.post("http://www.imooc.com/data/check_f.php", {num: $("#txtNumber").val()
                    },
                    function (data) {
                        $("ul").append("<li>你输入的<b>  "
                        + $("#txtNumber").val() + " </b>是<b> "
                        + data + " </b></li>");
                    });
                })
            });
        </script>
    </body>

ajax

$.ajax({
                type : "POST",
                url : "ajaxtest",
                async : false,
                data : {num:num},
                success : function(data) {

                    var Data=data;
                  for(var key in Data) { 
                       alert("键：" + key + ",值 ：{姓名："+ Data[key].name+", 年龄："+Data[key].age+"}");  
                    }

                },
                dataType : "json"
            });

export class HttpTest {
  posts: any;
  constructor(public navCtrl: NavController, public navParams: NavParams, public http: Http) {
    this.http.get('https://www.reddit.com/r/gifs/new/.json?limit=10').map(res => res.json()).subscribe(data =>{
      this.posts = data.data.children;
    });
  }

map()方法 http://www.jb51.net/article/69184.htm

$.map将一个数组中的元素转换到另一个数组中。

作为参数的转换函数会为每个数组元素调用，而且会给这个转换函数传递一个表示被转换的元素作为参数。

转换函数可以返回转换后的值、null（删除数组中的项目）或一个包含值的数组，并扩展至原始数组中。

//将原数组中每个元素加 4 转换为一个新数组。
//jQuery 代码:
$.map( [0,1,2], function(n){
 return n + 4;
});
//结果:
[4, 5, 6]

//原数组中大于 0 的元素加 1 ，否则删除。
//jQuery 代码:
$.map( [0,1,2], function(n){
 return n > 0 ? n + 1 : null;
});
//结果:
[2, 3]

<body>
  <p><b>Values: </b></p>
  <form>
    <input type="text" name="name" value="John"/>
    <input type="text" name="password" value="password"/>
    <input type="text" name="url" value="http://w3school.com.cn/"/>
  </form>

<script>
    $("p").append( $("input").map(function(){
      return $(this).val();
    }).get().join(", ") );
</script>