uni-app提交表单数据到后端

要想接收表单数据，首先要在表单进行数据的绑定，我们可以使用v-model="keyword"进行绑定。 然后在js获取这个绑定的值。

index.vue

<template>
<view>
    <view class="search-con">
         <view class="form-con">
            <form class="search-form">
                <input type="text" v-model="keyword" @tap="showsearchbtn" focus="true"/>
                <button form-type="submit" hover-class='none' @tap="keyword">提交</button>  
            </form>
         </view>
    </view>
</view>
<template>

<script>
export default {
    data() {
        return {},
        methods: {
            keyword(e){

                // 获取表单值
                let kw = this.keyword;

                // 打印表单提交的内容在控制台
                console.log(kw);
                
                // 发起网络请求将数据POST到后端服务器
                uni.request({
                    url: 'https://你的域名/getdata.php', //仅为示例，并非真实接口地址
                    data: {
                        keyword:kw
                    },
                    header: {},
                    success: (res) => {

    	                // 打印提交结果
                        console.log(res.data);
                    }
                });
            }
        }
    }
</script>

getdata.php 

<?php
	
	// 接收表单数据
	$keyword = $_POST['keyword'];

	if($keyword) {

		$ret = array(
			'code' => 200,
			'msg' => '提交成功',
			'keyword' => $keyword,
		);
	}else {

		$ret = array(
			'code' => 201,
			'msg' => '表单数据为空'
		);
	}
	
	echo json_encode($ret, JSON_UNESCAPED_UNICODE);
?>

作者：TANKING

编写：2020-08-13

更新：2023-10-26

博客：TANKING的博客