alpineJS的ajax请求服务器实例_米醋屋个人技术博客

今天演示一下我们的alpineJS的ajax请求服务器，及返回的渲染。

### 1、准备接口

首先准备我们的额json数据，及 222.json 文件。【大家这里可以实用自己的语言写接口，具体可以根据你得业务逻辑来】

```json
{
	"code":200,
	"res":{
		"name":"服务器" 
		,"cost_stage":"第二阶段" 
		,"product_name":"产品名称" 
		,"status":"开发中" 
		,"creator_name":"找冰洋" 
		,"type":"1" 
	},
	"msg":"请求成功"
}
```

### 2、HTML代码

接下来是具体的 html 代码了

```html
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Alpine演示效果</title>
    <script defer src="./js/alpine.min.js"></script>
</head>

<body>

<div x-data="myFunInit()" x-init="testInit()">
        <div>
            成本名称是： <span x-text="quote.name"></span> <br>
            阶段是： <span x-text="quote.cost_stage"></span> <br>
            产品名是： <span x-text="quote.product_name"></span> <br>
        </div>
    </div>

</body>

</html>
```
### 3、最终效果

[![](https://cos.micuu.com/web/markdown/636c724c45c91.png)](https://cos.micuu.com/web/markdown/636c724c45c91.png)

注:原创不易,转载请注明出处( https://micuu.com/new/3094.html )，本站所有资源来源于网络收集，如有侵权请联系QQ245557979进行清除。