react--数据请求

编程语言 2018-06-12 14:07:17 阅读次数: 2

get请求

静态数据        不方便修改，而且只能通过本页面进行修改

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8" />
        <title>Hello World</title>
        <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
        <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
        <script crossorigin src="https://unpkg.com/[email protected]/babel.min.js"></script>
        <!--数据请求-->
        <script src="https://cdn.bootcss.com/fetch/2.0.3/fetch.min.js"></script>
    </head>

    <body>
        <div id="root"></div>
    </body>

</html>
<script type="text/babel">

    class Fetch_get extends React.Component{
        constructor(props){
            super(props)
            this.state = {
                arr:[
                    {"id":"123001","name":"xiaoming"},
                    {"id":"123002","name":"xiaobing"},
                    {"id":"123003","name":"xiaona"}
                ]
            }
        }

        render(){
            return (
                <div>
                    <ul>
                        {
                            this.state.arr.map((ele,index,arr)=>{
                                return <li key={index}>{ele.name}</li>
                            })
                        }
                    </ul>
                </div>
            )
        }
    }

    ReactDOM.render(
        <Fetch_get></Fetch_get>, 
        document.getElementById('root') 
    );

</script>

请求json数据，完成页面渲染

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8" />
        <title>Hello World</title>
        <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
        <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
        <script crossorigin src="https://unpkg.com/[email protected]/babel.min.js"></script>
        <!--数据请求-->
        <script src="https://cdn.bootcss.com/fetch/2.0.3/fetch.min.js"></script>
    </head>

    <body>
        <div id="root"></div>

    </body>

</html>
<script type="text/babel">
    class Fetch_get extends React.Component{
        constructor(props){
            super(props)
            this.state = {
                arr:[]
            }
        }

        render(){
            return (
                <div>
                    <ul>
                        {
                            this.state.arr.map((ele,index,arr)=>{
                                return <li key={index}>{ele.name}</li>
                            })
                        }
                    </ul>
                </div>
            )
        }

        componentDidMount(){
            var url = "data.json"
            var option = {
                methods:"get"
            }

            fetch(url,option).then((res)=>{
                return res.json()
            }).then((res)=>{
                // 请求到的数据
                console.log(res)
                // 修改state
                this.setState({
                    arr:res
                })
                // 打印输出 
                console.log(this.state.arr)
            })
        }
    }

    ReactDOM.render(
        <Fetch_get></Fetch_get>, 
        document.getElementById('root') 
    );

</script>

数据库

为了方便数据的操作，我们平时在页面上看到的数据一般都是在线数据，通过后台系统管理，能够很方便实现对数据的修改

在此，就不多做演示！！！

在线接口

书写数据接口，通过后台操作，读取数据库数据，并形成接口的形式，我们需要对数据进行操作的时候，直接操作接口即可

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8" />
        <title>Hello World</title>
        <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
        <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
        <script crossorigin src="https://unpkg.com/[email protected]/babel.min.js"></script>
        <!--数据请求-->
        <script src="https://cdn.bootcss.com/fetch/2.0.3/fetch.min.js"></script>
    </head>

    <body>
        <div id="root"></div>

    </body>

</html>
<script type="text/babel">

    [{"id":"123001","name":"xiaoming"},{"id":"123002","name":"xiaobing"},{"id":"123003","name":"xiaona"}]

    class Fetch_get extends React.Component{

        constructor(props){
            super(props)
            this.state = {
                arr:[]
            }
        }

        render(){
            return (
                <div>
                    <ul>
                        {
                            this.state.arr.map((ele,index,arr)=>{
                                return <li key={index}>{ele.name}</li>
                            })
                        }
                    </ul>
                </div>
            )
        }

        componentDidMount(){
            //请求在线接口
            var url = "http://www.taoquan.store/robot/getUsers.php"
            var option = {
                methods:"get"
            }

            fetch(url,option).then((res)=>{
                return res.json()
            }).then((res)=>{
                // 请求到的数据
                console.log(res.users)
                // 修改state
                this.setState({
                    arr:res.users
                })
                // 打印输出 
                console.log(this.state.arr)
            })
        }
    }

    ReactDOM.render(
        <Fetch_get></Fetch_get>, 
        document.getElementById('root') 
    );

</script>

post数据请求

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8" />
        <title>Hello World</title>
        <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
        <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
        <script crossorigin src="https://unpkg.com/[email protected]/babel.min.js"></script>
        <!--数据请求-->
        <script src="https://cdn.bootcss.com/fetch/2.0.3/fetch.min.js"></script>
    </head>

    <body>
        <div id="root"></div>

    </body>

</html>
<script type="text/babel">

    class Com extends React.Component{
        constructor(props){
            super(props)
            this.state = {
                num:1
            }
        }

        render(){
            return (
                <div>
                    <ul>
                        <li>1</li>
                    </ul>
                </div>

            )
        }

        componentDidMount(){

            var url = 'http://127.0.0.1:8899/api/insertData'
            var options = {
                method: 'POST',
                  headers: {
                    'Content-Type': 'application/x-www-form-urlencoded',
                  },
                  body: 'name=1&sex=2&email=3&phone=4&address=5'
            }

            fetch(url,options)
            .then((res)=>{
                return res.json()
            })
            .then((res)=>{
                console.log(res)
            })

        }
    }


    ReactDOM.render(
        <Com></Com>, 
        document.getElementById('root') 
    );

</script>

核心代码，需注意

            var url = 'http://127.0.0.1:8899/api/insertData'
                var options = {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded',
                    },
                    body: 'name=1&sex=2&email=3&phone=4&address=5'
                }

            fetch(url,options)
            .then((res)=>{
                return res.json()
            })
            .then((res)=>{
                console.log(res)
            })

第二种方式

 componentDidMount(){

            var data = {
                name:"1",
                sex:"2",
                email:"3",
                phone:"4",
                address:"5"
            }

            fetch('http://127.0.0.1:8899/api/insertData',{
                method: 'POST',
                body: `data=${JSON.stringify(data)}`,
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded',
                  }
            })
            .then((res)=>{
                console.log(res.json())
            })
        }

Content-Type： 上传文件的时候，一定要设置为application/x-www-form-urlencoded


跨域

fetch跨域概述

在fetch跨域配置中有mode选项，提供了跨域的能力

  • mode: 'cors', // no-cors, cors, *same-origin

  • mode:'cors'

    • 这个选项提供了跨域的能力, 但是服务端必须支持 cors ,也就是设置 res.header("Access-Control-Allow-Origin", "*");

  • mode:'no-cors'

    • 可以跨域进行数据请求 , 不需要设置跨域 header
    • 在该模式下 得到的返回数据中 type为opaque。, 能够在控制台看到返回的数据, 但是没有权限使用这些数据

  • mode:"same-origin"

    • 同源, 不允许跨域

并不能成功跨域进行数据的请求

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8" />
        <title>Hello World</title>
        <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
        <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
        <script crossorigin src="https://unpkg.com/[email protected]/babel.min.js"></script>
        <!--数据请求-->
        <script src="https://cdn.bootcss.com/fetch/2.0.3/fetch.min.js"></script>
    </head>

    <body>
        <div id="root"></div>

    </body>

</html>
<script type="text/babel">


    class Fetch_get extends React.Component{
        constructor(props){
            super(props)
            this.state = {
                arr:[]
            }
        }

        render(){
            return (
                <div>
                    <ul>
                        {
                            this.state.arr.map((ele,index,arr)=>{
                                return <li key={index}>{ele.name}</li>
                            })
                        }
                    </ul>
                </div>
            )
        }

        componentDidMount(){

             var url = "https://api.douban.com/v2/movie/top250"
            // var url = 'http://127.0.0.1:8899/api/selectData'
            var option = {
                methods:"get",
                mode:'no-cors'
            }

            fetch(url,option).then((res)=>{
                console.log(res)
            })
        }
    }

    ReactDOM.render(
        <Fetch_get></Fetch_get>, 
        document.getElementById('root') 
    );

</script>

使用jsonp调取数据

在原生js中，我们可以利用script标签的支持跨域的特性进行

第一种方式---利用script标签的跨域访问特性

 <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>JSONP实现跨域2</title>
    </head>
    <body>
    </body>

    </html>
    <!--代码的先后顺序 不能变-->
    <script type="text/javascript">
        function fn(response){
                console.log(response);
        }
    </script>
    <script src="https://api.douban.com/v2/movie/top250?callback=fn"></script>

第二种方式---动态创建script

 <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>JSONP实现跨域2</title>
    </head>
    <body>
    </body>

    </html>
    <!--代码的先后顺序 不能变-->
    <script type="text/javascript">
        function fn(response){
                console.log(response);
        }

        var script = document.createElement('script')

        script.src = 'https://api.douban.com/v2/movie/top250?callback=fn'

        document.body.insertBefore(script, document.body.firstChild);   

    </script>

第三种方式---使用jquery

  <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
        </head>
        <body>
        </body>
    </html>
    <script src="https://code.jquery.com/jquery.js"></script>
    <script type="text/javascript">


        $.ajax({
            type:'get',
            url:"https://api.douban.com/v2/movie/top250?callback=?",
            success(res){
                console.log(res)
            },
            dataType:"jsonp"
        })

    </script>

猜你喜欢

转载自blog.csdn.net/ScathachServant/article/details/80654358
今日推荐
LFOSSA 源来如此公开课 | 掌握云原生未来：CNCF 认证全面攻略与备考秘籍
国产云输入法——仅华为无云端数据上传安全问题
开源日报 | 工业开源项目OGG 1.0；姐姐，你要和我一起配置火狐吗；苹果AI遥遥落后？Fedora 40
开放签电子签章：停止新增，优化体验，前进更进（五一假期前工作）
开源日报 | 中学生开源前端动画引擎；全球首个Llama3 8B中文版开源模型；联想电脑恐出局；Linus讽刺AI炒作
“百模大战”必有一战 | 2024中国“百模大战”竞争格局分析
周排行
Family Tree 题解
BZOJ 1093 最大半连通子图 SCC + DP
幂等处理
Spring----学习（2）----XML 配置Bean 自动装配
SQL Server 远程更新目标表数据
HIbernate3.6 环境搭建
特殊符号正则表达式
【Linux】第一章 进程的理解
843. n-皇后问题（dfs+输出各种情况）
空间数据库2
每日归档
更多
2024-04-26(39)
2024-04-25(22)
2024-04-24(36)
2024-04-23(26)
2024-04-22(39)
2024-04-21(0)
2024-04-20(6)
2024-04-19(5)
2024-04-18(0)
2024-04-17(5)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022