AJAX、fetch、HttpUrlConnection以及多线程

最新推荐文章于 2019-03-14 04:12:42 发布

weixin_30325487

最新推荐文章于 2019-03-14 04:12:42 发布

阅读量92

点赞数

文章标签： json javascript 移动开发 ViewUI

原文链接：http://www.cnblogs.com/YOU0928602X/p/10410572.html

版权

AJAX

 1 <script>
 2     $(function () {
 3         // 开始写 jQuery 代码...
 4         var myHtml = '<table border="1 solid red"><tr><td>ID</td><td>影片</td><td>票房</td></tr>';
 5         $.ajax({
 6             url:'test',//url地址
 7             data:null,//数据
 8             type:'POST',//访问类型
 9             dataType:'JSON',//返回数据类型数据
10 //成功时事件
11             success:function (myson) {
12                 $(myson).each(  function (index,film) {
13                    myHtml = myHtml + "<tr><td>"+film.id+"</td><td>"+film.filmName+"</td><td>"+film.boxOfficeStr+"</td></tr>";
14                 });
15                 myHtml = myHtml + "</table>";
16                 $('#mydiv').html(  myHtml  );
17             },
18 //失败时事件
19             error:function (err) {
20                 alert('服务器繁忙'+err);
21             },
22             timeout:3000
23         });
24     });

View Code

fetch

react

 fetch('/test',{
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            // body: JSON.stringify({})
        })
            .then(response => response.json())
            .then(data =>{
               /* alert(data)*/
                this.setState({filmlist:data});
            })
            .catch(
                error =>alert("2345678"+error)
            );

View Code

遍历输出到界面

 {
                    this.state.filmlist.map((myjson)=>{
                        return <tr><td>{myjson.id}</td><td>{myjson.filmName}</td><td>{myjson.boxOfficeStr}</td></tr>
                    })
                }

react-native

 fetch("http://169.254.230.118:8080/test",
          {
              method: "post",
              mode: 'cors',
              headers: {
                  "Content-Type": "application/json"
              },
              // body: JSON.stringify({})

          })
          .then(response => response.json())
          .then(mydate => {
              this.setState({
                  filmList:mydate
               })
          })
          .catch(
              (err)=>{
            alert(err)
          })

遍历输出大Android页面

  <FlatList
         renderItem={this._renderItem}
         data={this.state.filmList}
         ItemSeparatorComponent{this._itemSeparatorComponent}
         keyExtractor={this._keyExtractor}
  />
//-------------------
_itemSeparatorComponent=()=>{
        return(
            <View style={{height:1,backgroundColor: "#5f5f5f"}}></View>
        )
    }
    _renderItem = ({item}) => {
        return(
            <View style={{flexDirection:"row",backgroundColor:"#fefefe"}}>
                <View style={styles.eachView}><Text>{item.id}</Text></View>
                <View style={styles.eachView}><Text>{item.filmName}</Text></View>
                <View style={styles.eachView}><Text>{item.boxOfficeStr}</Text></View>
            </View>
        )
    }
        _keyExtractor = (item, index) => item.id.toString();