NGINX 重写规则
![不指定 不指定](images/weather/blank.gif)
nginx rewrite 实现二级域名跳转
PHP按符号截取字符串的指定部分
![不指定 不指定](images/weather/blank.gif)
1 | $str = '123/456/789/abc' ; |
1 | echo substr ( $str ,0, strpos ( $str , '/' )) |
1 2 3 | $array = explode ( '/' , $str ); echo $array [0]; // 输出 123 |
1 2 | echo substr ( $str , strpos ( $str , '/' )+1); //输出 456/789/abc |
1 | echo trim( strrchr ( $str , '/' ), '/' ); |
1 2 3 | $array = explode ( '/' , $str ); echo $array [3]; //输出 abc |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | /** * 按符号截取字符串的指定部分 * @param string $str 需要截取的字符串 * @param string $sign 需要截取的符号 * @param int $number 如是正数以0为起点从左向右截 负数则从右向左截 * @return string 返回截取的内容 */ function cut_str( $str , $sign , $number ){ $array = explode ( $sign , $str ); $length = count ( $array ); if ( $number <0){ $new_array = array_reverse ( $array ); $abs_number = abs ( $number ); if ( $abs_number > $length ){ return 'error' ; } else { return $new_array [ $abs_number -1]; } } else { if ( $number >= $length ){ return 'error' ; } else { return $array [ $number ]; } } } |
1 2 3 4 | echo cut_str( $str , '/' ,0); //输出 123 echo cut_str( $str , '/' ,2); //输出 789 echo cut_str( $str , '/' ,-1); //输出 abc echo cut_str( $str , '/' ,-3); //输出 456 |
js判断滚动条滚动方向
![不指定 不指定](images/weather/blank.gif)
- //第一种写法
- var a;
- function scroll( fn ) {
- var beforeScrollTop = document.body.scrollTop,
- fn = fn || function() {};
- window.addEventListener("scroll", function() {
- var afterScrollTop = document.body.scrollTop,
- delta = afterScrollTop - beforeScrollTop;
- if( delta === 0 ) return false;
- fn( delta > 0 ? "down" : "up" );
- beforeScrollTop = afterScrollTop;
- }, false);
- }
- scroll(function(direction) {
- // console.log(direction);
- a = direction;
- });
- // 第二种写法
- var a;
- function scroll( fn ) {
- var beforeScrollTop = document.body.scrollTop,
- fn = fn || function() {};
- window.addEventListener("scroll", function() {
- var afterScrollTop = document.body.scrollTop,
- delta = afterScrollTop - beforeScrollTop;
- if( delta === 0 ) return false;
- a = fn( delta > 0 ? "down" : "up" );
- beforeScrollTop = afterScrollTop;
- }, false);
- }
- scroll(function(direction) {
- // console.log(direction);
- return direction;
- });
- // 第三种写法-----=是执行完事件后的回调函数
- var a;
- var beforeScrollTop = document.body.scrollTop,
- fn = fn || function() {};
- window.addEventListener("scroll", function() {
- var afterScrollTop = document.body.scrollTop,
- delta = afterScrollTop - beforeScrollTop;
- if( delta === 0 ) return false;
- fn( delta > 0 ? "down" : "up" );
- beforeScrollTop = afterScrollTop;
- }, false);
- function fn(direction) {
- // console.log(direction);
- a = direction;
- };
- window.onscroll=function(){
- console.log(a);
- }
React - component组件的生命周期
![不指定 不指定](images/weather/blank.gif)
component的生命周期图
getDefaultProps
object getDefaultProps()
执行过一次后,被创建的类会有缓存,映射的值会存在this.props
,前提是这个prop不是父组件指定的
这个方法在对象被创建之前执行,因此不能在方法内调用this.props
,另外,注意任何getDefaultProps()
返回的对象在实例中共享,不是复制
getInitialState
object getInitialState()
控件加载之前执行,返回值会被用于state的初始化值
componentWillMount
void componentWillMount()
执行一次,在初始化render
之前执行,如果在这个方法内调用setState
,render()
知道state发生变化,并且只执行一次
render
ReactElement render()
render的时候会调用render()
会被调用
调用render()
方法时,首先检查this.props
和this.state
返回一个子元素,子元素可以是DOM组件或者其他自定义复合控件的虚拟实现
如果不想渲染可以返回null或者false,这种场景下,React渲染一个<noscript>
标签,当返回null或者false时,ReactDOM.findDOMNode(this)
返回null render()
方法是很纯净的,这就意味着不要在这个方法里初始化组件的state,每次执行时返回相同的值,不会读写DOM或者与服务器交互,如果必须如服务器交互,在componentDidMount()
方法中实现或者其他生命周期的方法中实现,保持render()
方法纯净使得服务器更准确,组件更简单
componentDidMount
void componentDidMount()
在初始化render之后只执行一次,在这个方法内,可以访问任何组件,componentDidMount()
方法中的子组件在父组件之前执行
从这个函数开始,就可以和 JS 其他框架交互了,例如设置计时 setTimeout 或者 setInterval,或者发起网络请求
shouldComponentUpdate
- 1
- 2
- 3
- 1
- 2
- 3
这个方法在初始化render
时不会执行,当props或者state发生变化时执行,并且是在render
之前,当新的props
或者state
不需要更新组件时,返回false
- 1
- 2
- 3
- 1
- 2
- 3
当shouldComponentUpdate
方法返回false时,讲不会执行render()
方法,componentWillUpdate
和componentDidUpdate
方法也不会被调用
默认情况下,shouldComponentUpdate
方法返回true防止state
快速变化时的问题,但是如果·state
不变,props
只读,可以直接覆盖shouldComponentUpdate
用于比较props
和state
的变化,决定UI是否更新,当组件比较多时,使用这个方法能有效提高应用性能
componentWillUpdate
- 1
- 2
- 3
- 1
- 2
- 3
当props
和state
发生变化时执行,并且在render
方法之前执行,当然初始化render时不执行该方法,需要特别注意的是,在这个函数里面,你就不能使用this.setState
来修改状态。这个函数调用之后,就会把nextProps
和nextState
分别设置到this.props
和this.state
中。紧接着这个函数,就会调用render()
来更新界面了
componentDidUpdate
- 1
- 2
- 3
- 1
- 2
- 3
组件更新结束之后执行,在初始化render
时不执行
componentWillReceiveProps
- 1
- 2
- 3
- 1
- 2
- 3
当props
发生变化时执行,初始化render
时不执行,在这个回调函数里面,你可以根据属性的变化,通过调用this.setState()
来更新你的组件状态,旧的属性还是可以通过this.props
来获取,这里调用更新状态是安全的,并不会触发额外的render
调用
- 1
- 2
- 3
- 4
- 5
- 1
- 2
- 3
- 4
- 5
componentWillUnmount
void componentWillUnmount()
当组件要被从界面上移除的时候,就会调用componentWillUnmount()
,在这个函数中,可以做一些组件相关的清理工作,例如取消计时器、网络请求等
总结
React Native的生命周期就介绍完了,其中最上面的虚线框和右下角的虚线框的方法一定会执行,左下角的方法根据props
state
是否变化去执行,其中建议只有在componentWillMount
,componentDidMount
,componentWillReceiveProps
方法中可以修改state
值
英文地址:https://facebook.github.io/react/docs/component-specs.html#lifecycle-methods
组件的生命周期
组件的生命周期分成三个状态:
Mounting:已插入真实 DOM
Updating:正在被重新渲染
Unmounting:已移出真实 DOM
React 为每个状态都提供了两种处理函数,will 函数在进入状态之前调用,did 函数在进入状态之后调用,三种状态共计五种处理函数。
componentWillMount()
componentDidMount()
componentWillUpdate(object nextProps, object nextState)
componentDidUpdate(object prevProps, object prevState)
componentWillUnmount()
此外,React 还提供两种特殊状态的处理函数。
componentWillReceiveProps(object nextProps):已加载组件收到新的参数时调用
shouldComponentUpdate(object nextProps, object nextState):组件判断是否重新渲染时调用
Websocket通信实例,配合后端php
![不指定 不指定](images/weather/blank.gif)
本站测试实例访问地址: http://code.liuxinxiu.com/php/Interface/html/WebSocket.html
- <!DOCTYPE html>
- <html>
- <head>
- <title>chatdemo</title>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width,initial-scale=1, maximum-scale=1, user-scalable=no">
- <link href="http://code.liuxinxiu.com/lib/bootstrap/3.3.2/bootstrap.min.css" rel="stylesheet">
- <style type="text/css">
- <!--
- html, body {
- min-height: 100%; }
- body {
- margin: 0;
- padding: 0;
- width: 100%;
- font-family: "Microsoft Yahei",sans-serif, Arial; }
- .container {
- text-align: center; }
- .title {
- font-size: 16px;
- color: rgba(0, 0, 0, 0.3);
- position: fixed;
- z-index:1000;
- line-height: 30px;
- height: 30px;
- left: 0px;
- right: 0px;
- background-color: white; }
- .content {
- background-color: #f1f1f1;
- border-top-left-radius: 6px;
- border-top-right-radius: 6px;
- margin-top: 30px; }
- .content .show-area {
- text-align: left;
- padding-top: 8px;
- padding-bottom: 168px; }
- .content .show-area .message {
- width: 70%;
- padding: 5px;
- word-wrap: break-word;
- word-break: normal; }
- .content .write-area {
- position: fixed;
- bottom: 0px;
- right: 0px;
- left: 0px;
- background-color: #f1f1f1;
- z-index: 10;
- width: 100%;
- height: 160px;
- border-top: 1px solid #d8d8d8; }
- .content .write-area .send {
- position: relative;
- top: -28px;
- height: 28px;
- border-top-left-radius: 55px;
- border-top-right-radius: 55px; }
- .content .write-area #name{
- position: relative;
- top: -20px;
- line-height: 28px;
- font-size: 13px; }
- -->
- </style>
- </head>
- <body>
- <div class="container">
- <div class="title">简易聊天demo</div>
- <div class="content">
- <div class="show-area"></div>
- <div class="write-area">
- <div><button class="btn btn-default send" >发送</button></div>
- <div><input name="name" id="name" type="text" placeholder="input your name"></div>
- <div>
- <textarea name="message" id="message" cols="38" rows="4" placeholder="input your message..."></textarea>
- </div>
- </div>
- </div>
- </div>
- <script src="http://code.liuxinxiu.com/lib/jquery/1.9.1/jquery.min.js"></script>
- <script src="http://code.liuxinxiu.com/lib/bootstrap/3.3.2/bootstrap.min.js"></script>
- <script>
- $(function(){
- var wsurl='ws://code.liuxinxiu.com:9090/php/webSocket/server.php';
- var websocket;
- var i = 0;
- /******** 判断是否有webSocket对象 *******/
- if(window.WebSocket){
- websocket=new WebSocket(wsurl);
- /******** 连接建立||发起webSocket连接 ********/
- websocket.onopen = function(evevt){
- console.log("Connected to WebSocket server.");
- /******** 监听ready状态码 ********/
- console.log('websocket.readyState:'+websocket.readyState);
- /*********************************************************
- 值为0值表示该连接尚未建立
- 值为1表示连接建立和沟通是可能的
- 值为2表示连接是通过将结束握手
- 值为3表示连接已关闭或无法打开
- *********************************************************/
- /******** 判断状态码为1则连接成功即可正常通信********/
- if(websocket.readyState==1){
- $('.show-area').append('<p class="bg-info message"><i class="glyphicon glyphicon-info-sign"></i>Connected to WebSocket server!</p>');
- }
- }
- //收到消息
- websocket.onmessage = function(event) {
- var msg = JSON.parse(event.data); //解析收到的json消息数据
- console.log("\n--->>message:\n"+event.data);
- var type = msg.type; // 消息类型
- var umsg = msg.message; //消息文本
- var uname = msg.name; //发送人
- i++;
- if(type == 'usermsg'){
- $('.show-area').append('<p class="bg-success message"><i class="glyphicon glyphicon-user"></i><a name="'+i+'"></a><span class="label label-primary">'+uname+' say: </span>'+umsg+'</p>');
- }
- if(type == 'system'){
- $('.show-area').append('<p class="bg-warning message"><a name="'+i+'"></a><i class="glyphicon glyphicon-info-sign"></i>'+umsg+'</p>');
- }
- $('#message').val('');
- window.location.hash = '#'+i;
- }
- //发生错误
- websocket.onerror = function(event){
- i++;
- console.log("Connected to WebSocket server error");
- $('.show-area').append('<p class="bg-danger message"><a name="'+i+'"></a><i class="glyphicon glyphicon-info-sign"></i>Connect to WebSocket server error.</p>');
- window.location.hash = '#'+i;
- }
- //连接关闭
- websocket.onclose = function(event){
- i++;
- console.log('websocket Connection Closed. ');
- $('.show-area').append('<p class="bg-warning message"><a name="'+i+'"></a><i class="glyphicon glyphicon-info-sign"></i>websocket Connection Closed.</p>');
- window.location.hash = '#'+i;
- }
- function send(){
- var name = $('#name').val();
- var message = $('#message').val();
- if(!name){
- alert('请输入用户名!');
- return false;
- }
- if(!message){
- alert('发送消息不能为空!');
- return false;
- }
- var msg = {
- message: message,
- name: name
- };
- try{
- websocket.send(JSON.stringify(msg));
- } catch(ex) {
- console.log(ex);
- }
- }
- //按下enter键发送消息
- $(window).keydown(function(event){
- if(event.keyCode == 13){
- console.log('user enter');
- send();
- }
- });
- //点发送按钮发送消息
- $('.send').bind('click',function(){
- send();
- });
- }
- else{
- alert('该浏览器不支持web socket');
- }
- });
- </script>
- </body>
- </html>
后端PHP代码部分:
- 2.php code:
- <?php
- $host = '127.0.0.1';
- $port = '9090';
- $null = NULL;
- //创建tcp socket
- $socket = socket_create(AF_INET, SOCK_STREAM, SOL_TCP);
- socket_set_option($socket, SOL_SOCKET, SO_REUSEADDR, 1);
- socket_bind($socket, 0, $port);
- //监听端口
- socket_listen($socket);
- //连接的client socket 列表
- $clients = array($socket);
- //设置一个死循环,用来监听连接 ,状态
- while (true) {
- $changed = $clients;
- socket_select($changed, $null, $null, 0, 10);
- //如果有新的连接
- if (in_array($socket, $changed)) {
- //接受并加入新的socket连接
- $socket_new = socket_accept($socket);
- $clients[] = $socket_new;
- //通过socket获取数据执行handshake
- $header = socket_read($socket_new, 1024);
- perform_handshaking($header, $socket_new, $host, $port);
- //获取client ip 编码json数据,并发送通知
- socket_getpeername($socket_new, $ip);
- $response = mask(json_encode(array('type'=>'system', 'message'=>$ip.' connected')));
- send_message($response);
- $found_socket = array_search($socket, $changed);
- unset($changed[$found_socket]);
- }
- //轮询 每个client socket 连接
- foreach ($changed as $changed_socket) {
- //如果有client数据发送过来
- while(socket_recv($changed_socket, $buf, 1024, 0) >= 1)
- {
- //解码发送过来的数据
- $received_text = unmask($buf);
- $tst_msg = json_decode($received_text);
- $user_name = $tst_msg->name;
- $user_message = $tst_msg->message;
- //把消息发送回所有连接的 client 上去
- $response_text = mask(json_encode(array('type'=>'usermsg', 'name'=>$user_name, 'message'=>$user_message)));
- send_message($response_text);
- break 2;
- }
- //检查offline的client
- $buf = @socket_read($changed_socket, 1024, PHP_NORMAL_READ);
- if ($buf === false) {
- $found_socket = array_search($changed_socket, $clients);
- socket_getpeername($changed_socket, $ip);
- unset($clients[$found_socket]);
- $response = mask(json_encode(array('type'=>'system', 'message'=>$ip.' disconnected')));
- send_message($response);
- }
- }
- }
- // 关闭监听的socket
- socket_close($sock);
- //发送消息的方法
- function send_message($msg)
- {
- global $clients;
- foreach($clients as $changed_socket)
- {
- @socket_write($changed_socket,$msg,strlen($msg));
- }
- return true;
- }
- //解码数据
- function unmask($text) {
- $length = ord($text[1]) & 127;
- if($length == 126) {
- $masks = substr($text, 4, 4);
- $data = substr($text, 8);
- }
- elseif($length == 127) {
- $masks = substr($text, 10, 4);
- $data = substr($text, 14);
- }
- else {
- $masks = substr($text, 2, 4);
- $data = substr($text, 6);
- }
- $text = "";
- for ($i = 0; $i < strlen($data); ++$i) {
- $text .= $data[$i] ^ $masks[$i%4];
- }
- return $text;
- }
- //编码数据
- function mask($text)
- {
- $b1 = 0x80 | (0x1 & 0x0f);
- $length = strlen($text);
- if($length <= 125)
- $header = pack('CC', $b1, $length);
- elseif($length > 125 && $length < 65536)
- $header = pack('CCn', $b1, 126, $length);
- elseif($length >= 65536)
- $header = pack('CCNN', $b1, 127, $length);
- return $header.$text;
- }
- //握手的逻辑
- function perform_handshaking($receved_header,$client_conn, $host, $port)
- {
- $headers = array();
- $lines = preg_split("/\r\n/", $receved_header);
- foreach($lines as $line)
- {
- $line = chop($line);
- if(preg_match('/\A(\S+): (.*)\z/', $line, $matches))
- {
- $headers[$matches[1]] = $matches[2];
- }
- }
- $secKey = $headers['Sec-WebSocket-Key'];
- $secAccept = base64_encode(pack('H*', sha1($secKey . '258EAFA5-E914-47DA-95CA-C5AB0DC85B11')));
- $upgrade = "HTTP/1.1 101 Web Socket Protocol Handshake\r\n" .
- "Upgrade: websocket\r\n" .
- "Connection: Upgrade\r\n" .
- "WebSocket-Origin: $host\r\n" .
- "WebSocket-Location: ws://$host:$port/demo/shout.php\r\n".
- "Sec-WebSocket-Accept:$secAccept\r\n\r\n";
- socket_write($client_conn,$upgrade,strlen($upgrade));
- }
关于Javascript的this
![不指定 不指定](images/weather/blank.gif)
- function test(){
- this.x = 1;
- alert(this.x);
- }
- test(); // 1
- var x = 1;
- function test(){
- alert(this.x); //取window下的x
- }
- test(); // 1
- var x = 1;
- function test(){
- this.x = 0; //this指针依然是window,只是重新复制而已
- }
- test();
- alert(x); //0
- function test(){
- alert(this.x);
- }
- var o = {};
- o.x = 1;
- o.m = test;
- o.m(); // 1
- var x='windowX';
- function test(){
- alert(this.x);
- }
- var o = {};
- //o.x = 1;
- o.m = test;
- o.m(); // undefined -->可见this不可能指向window
- function test(){
- this.x = 1;
- }
- var o = new test();
- alert(o.x); // 1
- var x='windowX';
- function test(){
- this.x = 1;
- }
- var o = new test();
- alert(o.x); // 1 -->可见this不可能指向window
- alert(x); // windowX
- var x = 'windowX';
- function test(){
- alert(this.x);
- }
- var o={};
- o.x = 1;
- o.m = test;
- o.m.apply(); //windowX m函数的apply更改了调用对象-->window
- o.m.apply(o); //1 运行结果就变成了1,证明this又指向了默认的o对象
- /******** this指针及变量提升的问题 ********/
- var foo='windowFoo';
- function main(){
- alert(foo); //第一个alert,一般规则是先查找当前内部变量有没有,有则取没有找上一层
- var foo = 2;
- alert(this.foo); //第二个alert,
- this.foo = 3;}
关于JS原型.原性链的总结整理
![不指定 不指定](images/weather/blank.gif)
- /******** 自定义构造函数 ********/
- function Fun(){}
- var foo=new Fun();
- foo.constructor==Fun()
- //也就是说自定义Fun函数的prototype原型就是foo实例的间接原型!自定义function的原型将继承Object
- /******** 实例对象可以直接使用__proto__找到构造器使用的prototype ********/
- foo.__proto__==foo.construtor.prototype;
- //true, 但是,__proto__属性在IE浏览器中一直到IE11才被支持
- /******** 自定义函数和原型的关系 ********/
- function c(){}
- c.prototype
- ->c {}
- --->constructor: function()
- --->proto: Object //对象继承的原型
- ============================================================================
- c.constructor //c本身已经是构造器了
- function Function() { [native code] }
- Function.prototype //构造函数Function的原型,如果没有特殊定义就是空function
- function (){}
- ============================================================================
- /******** 布尔值实例 ********/
- true.constructor
- function Boolean(){ [native code] }
- Boolean.prototype
- -> Boolean{ [[PrimitiveValue]]: false}
- --->constructor: function Boolean()
- --->toString: function toString()
- --->valueOf: function valueOf()
- ---> proto : Object //对象继承的原型
JS 遍历图片路径取得图片名并重新拼接
![不指定 不指定](images/weather/blank.gif)
- var arr=[
- {
- "picSrc": "http://code.liuxinxiu.com/upload/user/1460273594384A3577E4_c.jpg",
- "name": "贤惠的含羞草",
- "age": "36岁",
- "stature": "164cm",
- "character": "顾家",
- "info": "寻找北京的男生",
- "distance": "3.0km"
- },
- {
- "picSrc": "http://code.liuxinxiu.com/upload/user/1470127527444A8EF6B2_c.png",
- "name": "微微笑",
- "age": "28岁",
- "stature": "164cm",
- "character": "可爱",
- "info": "寻找北京 28~40岁的男生",
- "distance": "1.2km"
- }
- ];
- /******** 循环取得获取图片名称 ********/
- for(i in arr){
- if(arr[i].picSrc){
- var reg = /.*\/([^\.\/]+)/g;
- var fileName=arr[i].picSrc.replace(reg,"$1");
- arr[i].picSrc='http://code.liuxinxiu.com/upload/user/'+fileName; //重新赋值再转为JSON.字符串
- //console.log('http://code.liuxinxiu.com/upload/user/'+fileName); //重新拼接
- //console.log(fileName); //正则获取最后一个字符
- }
- };
- JSON.stringify(arr);
适用于LINUX下批量下载图片
React - ES6 - Ajax获取接口数据渲染到UI组件【完整示例】
![不指定 不指定](images/weather/blank.gif)
本站PHP后端接口: http://code.liuxinxiu.com/php/Interface/Jsoncallback.php?GUID=1&&Jsoncallback=1
本实例用 ES5 + JSX 语法编写[对应实例] : http://liuxinxiu.com/React_Ajax_setState_Render_UI_ES5/
- /****** ES6输入文件[调用模块依赖] ******/
- import React, { Component, PropTypes } from 'react'
- import $ from 'n-zepto'
- /****** ES5输入文件[调用模块依赖] ******/
- //var React=require('react');
- //var $=require('n-zepto');
- //import * as from './commentList.js'
- //import list from './commentList.js';
- /****** 本地模拟Array数据******/
- var movies = [
- {
- id: 1,
- name: '速度与激情001',
- date: 2011
- },
- {
- id: 2,
- name: '速度与激情002',
- date: 2009
- }
- ];
- /****** 外部子组件map数组当做模板之用 ES5 + JSX 语法编写 ******/
- var MoviesList = React.createClass({
- render: function () {
- // this.props 用于从组件外部传入数据
- var _movies = this.props._movies;
- return (
- <li className="datali">
- {_movies.id}-{_movies.name}
- </li>
- )
- }
- });
- /****** 外部子组件map数组当做模板之用 ES6 + JSX 语法编写 ******/
- let CommentList=class CommentList extends Component {
- constructor(props) {
- super(props); //ES6调用父类构造函数super不能少!
- this.state = {
- wording: '你好呀, '
- };
- }
- /****** Ajax子组件中[主体模板] ******/
- render(){
- return <ul>{this.props.comments.map(this.renderComment)}</ul>;
- }
- /****** Ajax子组件中[嵌套模板] ******/
- renderComment({plat,type,name,guid,cre_time,lottery}){
- return (
- <li>{plat}--{type}--{name}--{guid}--{cre_time}--{lottery}</li>
- )
- }
- }
- /****** 使用ES6 + JSX 语法编写 class xx extends React.Component{} 创建一个组件 ******/
- class CommentListContainer extends Component {
- /****** [ES6-constructor||ES5-getInitialState] ******/
- constructor(){
- super();
- this.state = {
- loading: true,
- title: '我喜欢的电影',
- movies: [],
- comments: []
- }
- }
- componentDidMount(){
- $.ajax({
- type: 'GET',
- url: 'http://code.liuxinxiu.com/php/Interface/Jsoncallback.php',
- data: {GUID:'1'},
- dataType:'jsonp', //告诉Ajax调用$jsonp
- jsonp: "Jsoncallback", //zpeto-1.2支持自定义回调名
- success: function(data){
- var yy=JSON.stringify(data);
- var tlist=JSON.stringify(data.enttityList);
- //console.log(tlist);
- //console.log(this.state.title+'22');
- this.setState({
- comments:data.enttityList,
- lottery:data.enttityList[0].lottery
- });
- var commentsStr=JSON.stringify(this.state.comments);
- console.log("\n--->>commentsStr:\n"+commentsStr); //查看获取的数据
- //console.log(this.state.comments+'33')
- }.bind(this),
- error: function(xhr, type){
- alert(xhr+type+'Ajax error!');
- }
- });
- //console.log(this.state.comments+'++++--!!'); //ajax底下拿不到结果因为提前于异步
- }
- render(){
- return <CommentList comments={this.state.comments}/>;
- }
- }
- /****** ES5输出给router ******/
- //module.exports=DemoComponent;
- /****** ES6输出给router ******/
- export default CommentListContainer;
React - ES5 - Ajax获取接口数据渲染到UI组件【完整示例】
![不指定 不指定](images/weather/blank.gif)
本站PHP后端接口: http://code.liuxinxiu.com/php/Interface/Jsoncallback.php?GUID=1&&Jsoncallback=1
本实例用 ES6 + JSX 语法编写[对应实例] : http://liuxinxiu.com/React_Ajax_setState_Render_UI_ES6/
- //import React, { Component, PropTypes } from 'react'
- //import $ from 'n-zepto'
- var React=require('react'); //Es-5
- var $=require('n-zepto'); //Es-5
- //import * as from './commentList.js'
- //import list from './commentList.js';
- /****** 外部子组件map数组当做模板之用 ******/
- var MoviesList = React.createClass({
- render: function () {
- // this.props 用于从组件外部传入数据
- ar _movies = this.props._movies;
- return (
- <li className="datali">
- {_movies.id}-{_movies.name}
- </li>
- )
- }
- });
- /****** 本地模拟Array数据******/
- var movies = [
- {
- id: 1,
- name: '速度与激情001',
- date: 2011
- },
- {
- id: 2,
- name: '速度与激情002',
- date: 2009
- }
- ];
- /****** 使用Es5语法 React.createClass 创建一个组件 ******/
- var DemoComponent = React.createClass({
- /****** 使用 getInitialState 的返回值作为数据的默认值 ******/
- getInitialState: function () {
- // this.state 用于存储数据comments被Ajax赋值要先定义个名称
- return {
- loading: true,
- title: '我喜欢的电影',
- movies: [],
- comments: []
- }
- },
- componentDidMount: function() {
- $.ajax({
- type: 'GET',
- url: 'http://code.liuxinxiu.com/php/Interface/Jsoncallback.php',
- data: {GUID:'1'},
- dataType:'jsonp', //告诉Ajax调用$jsonp
- jsonp: "Jsoncallback", //zpeto-1.2支持自定义回调名
- success: function(data){
- var yy=JSON.stringify(data);
- var tlist=JSON.stringify(data.enttityList);
- console.log(tlist);
- //console.log(this.state.title+'22')
- this.setState({
- comments:data.enttityList,
- lottery:data.enttityList[0].lottery
- });
- var slist=JSON.stringify(this.state.comments);
- console.log(slist)
- //console.log(this.state.comments+'33')
- }.bind(this),
- error: function(xhr, type){
- alert(xhr+type+'Ajax error!'); //error
- }
- });
- //console.log(this.state.comments+'++++--!!'); //ajax底下拿不到结果因为提前于异步
- },
- render: function () {
- // this.state 用于存储当前的数据
- var comments = this.state.comments;
- //var dataHtml=movies.map(<p>{name}</p>);// 注意这里 bind(this) 修正了上下文
- /****** Movies子模板 ******/
- function renderMovies({id,name}){
- return <li>{id}-{name}</li>;
- }
- /****** Movies大模板[内嵌子模板] ******/
- //var dataHtml = movies.map(renderMovies);
- /****** Movies大模板[外调子模板] ******/
- var dataHtml = movies.map(function(movies){
- return (
- <MoviesList _movies={movies}/>
- )
- }.bind(this));// 注意这里 bind(this) 修正了上下文
- //console.log('movies:'+movies+'--'+'dataHtml:'+dataHtml);
- /****** Ajax子模板******/
- function renderComment({plat,type,name,guid,cre_time,lottery}){
- return <li>{plat}--{type}--{name}--{guid}--{cre_time}--{lottery}</li>;
- }
- /****** Ajax大模板 ******/
- var AjaxHtml = this.state.comments.map(renderComment);
- //var AjaxHtml='11'
- console.log('comments:'+comments+'--'+'AjaxHtml:'+AjaxHtml);
- return (
- <ul>{AjaxHtml}</ul>
- )
- }
- });
- /****** ES5输出给router ******/
- module.exports=DemoComponent;
- /****** ES6输出给router ******/
- //export default DemoComponent;