React进行服务器端数据请求---fetch

其他 2018-09-05 07:57:58 阅读次数: 0

get请求

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

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8" />
  5. <title>Hello World </title>
  6. <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"> </script>
  7. <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"> </script>
  8. <script crossorigin src="https://unpkg.com/[email protected]/babel.min.js"> </script>
  9. <!--数据请求-->
  10. <script src="https://cdn.bootcss.com/fetch/2.0.3/fetch.min.js"> </script>
  11. </head>
  12. <body>
  13. <div id="root"> </div>
  14. </body>
  15. </html>
  16. <script type="text/babel">
  17. class Fetch_get extends React.Component{
  18. constructor(props){
  19. super(props)
  20. this.state = {
  21. arr:[
  22. { "id": "123001", "name": "xiaoming"},
  23. { "id": "123002", "name": "xiaobing"},
  24. { "id": "123003", "name": "xiaona"}
  25. ]
  26. }
  27. }
  28. render(){
  29. return (
  30. <div>
  31. <ul>
  32. {
  33. this.state.arr.map((ele,index,arr)=>{
  34. return <li key={index}>{ele.name} </li>
  35. })
  36. }
  37. </ul>
  38. </div>
  39. )
  40. }
  41. }
  42. ReactDOM.render(
  43. <Fetch_get></Fetch_get>,
  44. document.getElementById( 'root')
  45. );
  46. </script>

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

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8" />
  5. <title>Hello World </title>
  6. <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"> </script>
  7. <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"> </script>
  8. <script crossorigin src="https://unpkg.com/[email protected]/babel.min.js"> </script>
  9. <!--数据请求-->
  10. <script src="https://cdn.bootcss.com/fetch/2.0.3/fetch.min.js"> </script>
  11. </head>
  12. <body>
  13. <div id="root"> </div>
  14. </body>
  15. </html>
  16. <script type="text/babel">
  17. class Fetch_get extends React.Component{
  18. constructor(props){
  19. super(props)
  20. this.state = {
  21. arr:[]
  22. }
  23. }
  24. render(){
  25. return (
  26. <div>
  27. <ul>
  28. {
  29. this.state.arr.map((ele,index,arr)=>{
  30. return <li key={index}>{ele.name} </li>
  31. })
  32. }
  33. </ul>
  34. </div>
  35. )
  36. }
  37. componentDidMount(){
  38. var url = "data.json"
  39. var option = {
  40. methods: "get"
  41. }
  42. fetch(url,option).then( (res)=>{
  43. return res.json()
  44. }).then( (res)=>{
  45. // 请求到的数据
  46. console.log(res)
  47. // 修改state
  48. this.setState({
  49. arr:res
  50. })
  51. // 打印输出
  52. console.log( this.state.arr)
  53. })
  54. }
  55. }
  56. ReactDOM.render(
  57. <Fetch_get></Fetch_get>,
  58. document.getElementById( 'root')
  59. );
  60. </script>

数据库

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

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

在线接口

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

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8" />
  5. <title>Hello World </title>
  6. <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"> </script>
  7. <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"> </script>
  8. <script crossorigin src="https://unpkg.com/[email protected]/babel.min.js"> </script>
  9. <!--数据请求-->
  10. <script src="https://cdn.bootcss.com/fetch/2.0.3/fetch.min.js"> </script>
  11. </head>
  12. <body>
  13. <div id="root"> </div>
  14. </body>
  15. </html>
  16. <script type="text/babel">
  17. [{ "id": "123001", "name": "xiaoming"},{ "id": "123002", "name": "xiaobing"},{ "id": "123003", "name": "xiaona"}]
  18. class Fetch_get extends React.Component{
  19. constructor(props){
  20. super(props)
  21. this.state = {
  22. arr:[]
  23. }
  24. }
  25. render(){
  26. return (
  27. <div>
  28. <ul>
  29. {
  30. this.state.arr.map((ele,index,arr)=>{
  31. return <li key={index}>{ele.name} </li>
  32. })
  33. }
  34. </ul>
  35. </div>
  36. )
  37. }
  38. componentDidMount(){
  39.              //请求在线接口
  40. var url = "http://www.taoquan.store/robot/getUsers.php"
  41. var option = {
  42. methods: "get"
  43. }
  44. fetch(url,option).then( (res)=>{
  45. return res.json()
  46. }).then( (res)=>{
  47. // 请求到的数据
  48. console.log(res.users)
  49. // 修改state
  50. this.setState({
  51. arr:res.users
  52. })
  53. // 打印输出
  54. console.log( this.state.arr)
  55. })
  56. }
  57. }
  58. ReactDOM.render(
  59. <Fetch_get></Fetch_get>,
  60. document.getElementById( 'root')
  61. );
  62. </script>

post数据请求

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8" />
  5. <title>Hello World </title>
  6. <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"> </script>
  7. <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"> </script>
  8. <script crossorigin src="https://unpkg.com/[email protected]/babel.min.js"> </script>
  9. <!--数据请求-->
  10. <script src="https://cdn.bootcss.com/fetch/2.0.3/fetch.min.js"> </script>
  11. </head>
  12. <body>
  13. <div id="root"> </div>
  14. </body>
  15. </html>
  16. <script type="text/babel">
  17. class Com extends React.Component{
  18. constructor(props){
  19. super(props)
  20. this.state = {
  21. num: 1
  22. }
  23. }
  24. render(){
  25. return (
  26. <div>
  27. <ul>
  28. <li>1 </li>
  29. </ul>
  30. </div>
  31. )
  32. }
  33. componentDidMount(){
  34. var url = 'http://127.0.0.1:8899/api/insertData'
  35. var options = {
  36. method: 'POST',
  37. headers: {
  38. 'Content-Type': 'application/x-www-form-urlencoded',
  39. },
  40. body: 'name=1&sex=2&email=3&phone=4&address=5'
  41. }
  42. fetch(url,options)
  43. .then( (res)=>{
  44. return res.json()
  45. })
  46. .then( (res)=>{
  47. console.log(res)
  48. })
  49. }
  50. }
  51. ReactDOM.render(
  52. <Com></Com>,
  53. document.getElementById( 'root')
  54. );
  55. </script>

核心代码，需注意

  1.             var url = 'http://127.0.0.1:8899/api/insertData'
  2.                 var options = {
  3.                     method: 'POST',
  4.                     headers: {
  5.                         'Content-Type': 'application/x-www-form-urlencoded',
  6.                     },
  7.                     body: 'name=1&sex=2&email=3&phone=4&address=5'
  8.                 }
  9. fetch(url,options)
  10. .then((res)=>{
  11. return res.json()
  12. })
  13. .then((res)=>{
  14. console.log(res)
  15. })

第二种方式

  1. componentDidMount(){
  2. var data = {
  3. name:"1",
  4. sex:"2",
  5. email:"3",
  6. phone:"4",
  7. address:"5"
  8. }
  9. fetch('http://127.0.0.1:8899/api/insertData',{
  10. method: 'POST',
  11. body: `data=${JSON.stringify(data)}`,
  12. headers: {
  13. 'Content-Type': 'application/x-www-form-urlencoded',
  14. }
  15. })
  16. .then((res)=>{
  17. console.log(res.json())
  18. })
  19. }

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"

    • 同源, 不允许跨域

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

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8" />
  5. <title>Hello World </title>
  6. <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"> </script>
  7. <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"> </script>
  8. <script crossorigin src="https://unpkg.com/[email protected]/babel.min.js"> </script>
  9. <!--数据请求-->
  10. <script src="https://cdn.bootcss.com/fetch/2.0.3/fetch.min.js"> </script>
  11. </head>
  12. <body>
  13. <div id="root"> </div>
  14. </body>
  15. </html>
  16. <script type="text/babel">
  17. class Fetch_get extends React.Component{
  18. constructor(props){
  19. super(props)
  20. this.state = {
  21. arr:[]
  22. }
  23. }
  24. render(){
  25. return (
  26. <div>
  27. <ul>
  28. {
  29. this.state.arr.map((ele,index,arr)=>{
  30. return <li key={index}>{ele.name} </li>
  31. })
  32. }
  33. </ul>
  34. </div>
  35. )
  36. }
  37. componentDidMount(){
  38. var url = "https://api.douban.com/v2/movie/top250"
  39. // var url = 'http://127.0.0.1:8899/api/selectData'
  40. var option = {
  41. methods: "get",
  42. mode: 'no-cors'
  43. }
  44. fetch(url,option).then( (res)=>{
  45. console.log(res)
  46. })
  47. }
  48. }
  49. ReactDOM.render(
  50. <Fetch_get></Fetch_get>,
  51. document.getElementById( 'root')
  52. );
  53. </script>

使用jsonp调取数据

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

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

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>JSONP实现跨域2 </title>
  6. </head>
  7. <body>
  8. </body>
  9. </html>
  10. <!--代码的先后顺序 不能变-->
  11. <script type="text/javascript">
  12. function fn(response){
  13. console.log(response);
  14. }
  15. </script>
  16. <script src="https://api.douban.com/v2/movie/top250?callback=fn"> </script>

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

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>JSONP实现跨域2 </title>
  6. </head>
  7. <body>
  8. </body>
  9. </html>
  10. <!--代码的先后顺序 不能变-->
  11. <script type="text/javascript">
  12. function fn(response){
  13. console.log(response);
  14. }
  15. var script = document.createElement( 'script')
  16. script.src = 'https://api.douban.com/v2/movie/top250?callback=fn'
  17. document.body.insertBefore(script, document.body.firstChild);
  18. </script>

第三种方式---使用jquery

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title> </title>
  6. </head>
  7. <body>
  8. </body>
  9. </html>
  10. <script src="https://code.jquery.com/jquery.js"> </script>
  11. <script type="text/javascript">
  12. $.ajax({
  13. type: 'get',
  14. url: "https://api.douban.com/v2/movie/top250?callback=?",
  15. success(res){
  16. console.log(res)
  17. },
  18. dataType: "jsonp"
  19. })
  20. </script>

猜你喜欢

转载自blog.csdn.net/qq_39985511/article/details/80883498
今日推荐
美国拟限制 AI 大模型出口中国和俄罗斯
苹果将与 OpenAI 达成协议，将 ChatGPT 应用于 iPhone
openKylin 社区生态委员会第六次会议圆满召开
阿里云正式发布通义千问 2.5
Python 3.13 发布首个 Beta：实验性自由线程模式和 JIT、改进交互式解释器
Stack Overflow 拿我的代码去训练 AI 大模型，还封了我的账号
Pop!_OS 的 COSMIC 桌面完成 App Store 上架工作
报告：Django 仍然是 74% 开发者的首选
《2024 年一季度互联网投融资运行情况》研究报告
15 年前上了“FFmpeg 耻辱柱”，今天他还得谢谢咱——腾讯QQPlayer一雪前耻？
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
GCC 14.1 发布
周排行
curl的POST请求，封装方法
8.1.1. Integer Types
Java基础 Day05(个人复习整理)
Python - Django - 中间件 process_exception
小L的试卷
【Shell编程】 （函数）判断用户是否存在
python(css样式)
spring ant path 匹配原则 - 【笔记】
《JavaScript与JScript从入门到精通》(美)James.Jaworski.中译本.扫描版.pdf
Eclipse运行带参数的java程序
每日归档
更多
2024-05-12(0)
2024-05-11(38)
2024-05-10(38)
2024-05-09(35)
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022