【若依前后端分离+app】第二篇--页面表单和前后端信息交互_Javascript

示例图：

index.vue页面代码：

<template>
	<view class="container">
		
		<uni-card :is-shadow="false" is-full>
			<text class="uni-h6">详细信息</text>
		</uni-card>

		<view class="example">
			<uni-forms ref="form" :modelvalue="formdata" :rules="rules">
				<uni-forms-item label="a" name="a" required>
					<uni-combox :candidates="aoptions"  v-model="formdata.a" placeholder="请选择a">
					</uni-combox>
				</uni-forms-item>
				<uni-forms-item label="b" name="b" required>
					<uni-combox :candidates="boptions" v-model="formdata.b"  placeholder="请选择b" >
					</uni-combox>
				</uni-forms-item>
				<uni-forms-item label="c" name="c" required>
					<uni-number-box v-model="formdata.c" :step="1" :min="1" :max="100" />
				</uni-forms-item>
				<button type="primary" @click="cbound">按钮</button>
			</uni-forms>
		</view>



	</view>


</template>

<script>
	
	import {
		aselect,bselect,cbound
	} from "@/api/one/one.js";
	export default {
		data() {
			return {
				//a信息
				aoptions: [],
				//b信息
				boptions: [],
				
				messagetext: null,
				msgtype: null,
				formdata: {
					a: '',
					b: '',
					c:1,
				},
				rules: {},
			}
		},
		created() {
			this.geta();
			this.getb();
		},
		methods: {
			/**
			 * 查询a信息
			 */
			geta() {
				aselect().then(response => {
					var a= response.data
				 this.aoptions=a.map(a=>{				
					return a.a
					 })
					});
			},
			/**
			 * 查询b信息
			 */
			getb() {
				bselect().then(response => {
					console.log(response)
					var b= response.data
					
				 this.boptions=b.map(b=>{
					return b.b
					 })
				});
			},
			
			
			cbound() {
				console.log(this.formdata)
				
					cbound(this.formdata).then(response => {
					  this.$modal.msgsuccess("修改成功")
					})
					
				
			},
			
		}
	}
</script>
<style lang="scss">
	page {
		background-color: #ffffff;
	}

	.example {
		padding: 15px;
		background-color: #fff;
	}

	/* .number{
		.number::before{content: '*';color: red;}
	} */
</style>

api/one/one.js代码：

content-type 的值类型：header可以修改

1、默认是使用的application/json，消息主体是序列化后的json字符串

2、application/x-www-form-urlencoded ，是jquery的ajax请求默认方式，这种方式的好处就是浏览器都支持，在请求发送过程中会对数据进行序列化处理，以键值对形式。另外浏览器的原生 form 表单，如果不设置 enctype 属性，那么最终就会以 application/x-www-form-urlencoded 方式提交数据。

import upload from '@/utils/upload'
import request from '@/utils/request'


//获取a信息
export function aselect(){
  return request({
    url:'',//省略--补充例/xx/xx
    method:'get'
  })
}
//获取b信息
export function bselect(){
  return request({
    url:'',//省略--补充
    method:'get'
  })
}

// 按钮
export function cbound(data) {
  return request({
    url: '',//省略--补充
    method: 'post',
    data: data,
	header : {"content-type":"application/x-www-form-urlencoded"}
  })
}

后端

get

/**
     * 获取a信息
     */
    @preauthorize("@ss.haspermi('a:info:query')")
    @getmapping("/aselect")
    public ajaxresult aselect()
    {
//获取数据内容
        return ajaxresult.success(ainfoservice.aselect());
    }

post

@preauthorize("@ss.haspermi('c:info:remove')")
    @log(title = "c信息", businesstype = businesstype.update)
    @postmapping("/cbound")
    public ajaxresult cbound(string a, string b, int c) {
//数据处理
        return cservice.cbound(a,b,c);
    }