form.submit()方法缺陷

本文详细解析了JavaScript中两种常见的页面跳转方式及其参数传递机制,包括使用`<script type='text/javascript'>`中的`submit()`与`document.location.href`的区别,并提供了实例演示。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

<SCRIPT type='text/javascript'> 
function firstpage(){ 
var theform=document.getElementById('fmcc'); 
theform.action=theform.action+'?curpage=2';
theform.submit();
}
</SCRIPT>

 用这种方式在action后面添加参数,可以提交,但在问号后添加的参数不能传递,前台地址栏为:

http://localhost:8080/pageTest/lpm/step.action   没有带上参数

二、

 

<SCRIPT type='text/javascript'> 
function firstpage(){ 
var theform=document.getElementById('fmcc'); 
theform.action=theform.action+'?curpage=2';
document.location.href=theform.action;
}
</SCRIPT>

 用这种方式可以传递成功,前台地址栏位:

http://localhost:8080/pageTest/lpm/step.action?curpage=2 有带上参数

<template> <div style="margin: 20px auto; width: 80%"> <div class="card"> <div style="font-size: 20px; font-weight: bold; margin-bottom: 20px">账户充值</div> <el-form :model="form" label-width="100px"> <el-form-item label="当前余额"> <span style="color: #ff5000; font-weight: bold">¥{{ formatBalance(user.balance) }}</span> </el-form-item> <el-form-item label="充值金额" required> <el-input-number v-model="form.amount" :min="1" :step="100" controls-position="right" ></el-input-number> </el-form-item> <el-form-item label="支付方式" required> <el-radio-group v-model="form.paymentMethod"> <el-radio label="alipay">支付宝</el-radio> <el-radio label="wechat">微信支付</el-radio> <el-radio label="bank">银行卡</el-radio> </el-radio-group> </el-form-item> <el-form-item> <el-button type="primary" @click="submit">确认支付</el-button> </el-form-item> </el-form> </div> </div> </template> <script setup> import {ref, reactive} from 'vue' import request from '@/utils/request.js' import {ElMessage} from 'element-plus' import {useRouter} from 'vue-router' const router = useRouter() // 修复:确保正确解析 localStorage const user = ref(JSON.parse(localStorage.getItem('xm-user') || '{}') // 添加一个格式化余额的方法 const formatBalance = (balance) => { if (balance === null || balance === undefined) { return '0.00' } // 确保 balance 是数字 const num = Number(balance) if (isNaN(num)) { return '0.00' } return num.toFixed(2) } const form = reactive({ amount: 100, paymentMethod: 'alipay' }) const submit = () => { if (!form.amount || form.amount <= 0) { ElMessage.warning('请输入充值金额') return } // 调用充值API request.post('/user/recharge', { userId: user.value.id, amount: form.amount }).then(res => { if (res.code === '200') { ElMessage.success('充值成功') // 更新本地用户信息 request.get('/user/info').then(res => { if (res.code === '200') { localStorage.setItem('xm-user', JSON.stringify(res.data)) user.value = res.data // 更新本地用户对象 router.push('/front/home') } }) } else { ElMessage.error(res.msg) } }) } </script>找出错误
最新发布
08-10
<template> <van-form @submit="submitForm" @failed="onFailed" ref="ruleFormRef" :model="form"> <van-cell-group> <van-field v-model="form.username" label="账号:" placeholder="请输入账号" clearable name="username" :rules="usernameRules" ></van-field> </van-cell-group> <van-cell-group> <van-field v-model="form.password" label="密码:" placeholder="请输入密码" clearable type="password" name="password" :rules="passwordRules" ></van-field> </van-cell-group> <van-cell-group> <van-field v-model="form.confirmPassword" label="确认密码:" placeholder="请再次输入密码" clearable type="password" name="confirmPassword" :rules="comfirmPasswordRules" ></van-field> </van-cell-group> <van-cell-group> <van-button block round type="primary" native-type="submit">注册</van-button> </van-cell-group> </van-form> <div class="tip">注册成功后的用户可用于登录</div> </template> <script setup> import { ref, reactive } from 'vue' import { getUser, register } from '../api' import useToken from '../stores/token' import useUser from '../stores/user' import { useRouter } from 'vue-router' const { updateToken} = useToken() const { updateUser } = useUser() const form = reactive({ username: '', password: '', confirmPassword: '' }) const ruleFormRef = ref() const router = useRouter() // 定义验证规则 const usernameRules = ref([ { required: true, message: '用户名不能为空', trigger: 'onBlur' }, { pattern: /^\w{3,16}$/, message: '用户名长度为3-16个字符', trigger: 'onBlur' } ]) const passwordRules = ref([ { required: true, message: '密码不能为空', trigger: 'onBlur' }, { pattern: /^\w{6,24}$/, message: '密码必须为6-24位英文字母或数字', trigger: 'onBlur' } ]) const comfirmPasswordRules = ref([ { required: true, message: '密码不能为空', trigger: 'onBlur' }, { pattern: /^\w{6,24}$/, message: '密码必须为6-24位英文字母或数字', trigger: 'onBlur' }, { validator: value => { if (value !== form.password) { return '两次输入的密码不一致' } return true } } ]) // 表单提交函数 const submitForm = async () => { const data = await register(form) if (data) { updateToken(data.token) const user = await getUser() updateUser({ isLogin: true, username: user.username, avatar: user.avatar }) router.push({ name: 'user' }) } } const onFailed = errorInfo => { console.log('failed', errorInfo) } </script> <style lang="less" scoped> button { position: fixed; top: 270px; } .tip { position: fixed; top: 330px; text-align: center; width: 100%; font-size: 14px; color: #666; } </style>
07-02
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值