个人中心
gpt4 book ai didi

laravel - 如何使用 vue.js 获取多个表单元素的值并将它们发送到 Controller ？

转载 作者：行者123 更新时间：2023-12-01 06:08:27 29 4
gpt4 key购买 nike

我正在学习 Laravel 5.2 和 vue.js，不熟悉语法，问题是:

如何获取下面表单元素的所有值并使用 vue.js 将它们发送到 Controller ？
包括文本、选择、文本区域、文件输入、 radio 、复选框。

PS:
html 演示中有一个插件，它的功能是压缩选定的图像。
lrz.bundle.js, https://github.com/think2011/localResizeIMG

html演示:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" integrity="sha384-y3tfxAZXuh4HwSYylfB+J125MxIs6mR5FOHamPBG064zB+AFeWH94NdvaCBm8qnd" crossorigin="anonymous">
</head>
<body>
<div class="container">
    <form>
        <div class="form-group row">
            <label for="formGroupExampleInput" class="col-sm-2 form-control-label">Text</label>
            <div class="col-sm-10">
                <input type="text" class="form-control" id="formGroupExampleInput" placeholder="">
            </div>
        </div>
        <div class="form-group row">
            <label for="exampleSelect1" class="col-sm-2 form-control-label">Select</label>
            <div class="col-sm-10">
                <select class="form-control" id="exampleSelect1">
                    <option>1</option>
                    <option>2</option>
                    <option>3</option>
                    <option>4</option>
                    <option>5</option>
                </select>
            </div>
        </div>
        <div class="form-group row">
            <label for="exampleTextarea" class="col-sm-2 form-control-label">Textarea</label>
            <div class="col-sm-10">
                <textarea class="form-control" id="exampleTextarea" rows="3"></textarea>
            </div>
        </div>
        <div class="form-group row">
            <label for="exampleInputFile" class="col-sm-2 form-control-label">File input</label>
            <div class="col-sm-10">
                <input id="exampleInputFile" name="photo" type="file" class="form-control-file" value="Upload" accept="image/*">
                preview:
                <img id="preview"/>
            </div>
        </div>
        <div class="form-group row">
            <label class="col-sm-2">Radios</label>
            <div class="col-sm-10">
                <label class="radio-inline">
                    <input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"> 1
                </label>
                <label class="radio-inline">
                    <input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2"> 2
                </label>
                <label class="radio-inline">
                    <input type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3"> 3
                </label>
            </div>
        </div>
        <div class="form-group row">
            <label class="col-sm-2">Checkboxes</label>
            <div class="col-sm-10">
                <div class="checkbox">
                    <label class="checkbox-inline">
                        <input type="checkbox" id="inlineCheckbox1" value="option1"> 1
                    </label>
                    <label class="checkbox-inline">
                        <input type="checkbox" id="inlineCheckbox2" value="option2"> 2
                    </label>
                    <label class="checkbox-inline">
                        <input type="checkbox" id="inlineCheckbox3" value="option3"> 3
                    </label>
                </div>
            </div>
        </div>
        <div class="form-group row">
            <div class="col-sm-offset-2 col-sm-10">
                <button type="submit" class="btn btn-secondary">Submit</button>
            </div>
        </div>
    </form>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js" integrity="sha384-vZ2WRJMwsjRMW/8U7i6PWi6AlO1L79snBrmgiDpgIWJ82z8eA5lenwvxbMV1PAh7" crossorigin="anonymous"></script>
<script src="js/dist/lrz.bundle.js"></script>
<script>
    $(function () {
        var $preview = $('#preview');
        $('#exampleInputFile').on('change', function () {
            lrz(this.files[0], {
                width: 800
            }).then(function (rst) {
                $preview.attr('src', rst.base64);
                rst.formData.append('fileLen', rst.fileLen);
            });
        });
    });
</script>
</body>
</html>

最佳答案

我有点不确定它是否真的是 Laravel -> 您正在寻找的 Vue 设置，因为您的问题中绝对没有 Laravel 或 Vue 代码，这是非常广泛的，但这里有一个基本模板开始了。我几乎在每个项目中都使用以下内容。

Laravel

创建您的路线 - 路线/web.php:

Route::post('/myform', 'FormControntroller@submitForm');

创建您的 Controller 和方法 - app/http/controllers/FormController.php 
class FormController extends App\Controllers\Controller {

    public function submitForm()
    {
         var_dump(request->all());
    }
}

创建您的条目 View - 资源/ View /app.blade.php 
        <html>
            <head>
               <title>Minimal Vue Example</title>
            </head>
            <body>
                <div id="app">
                </div>
                <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.1/vue.min.js"></script>
                <script src="/js/main.js"></script
            </body>
        </html>

vue

主文件 
import Vue from 'vue'
import Resource from 'vue-resource'
import Router from 'vue-router'

import Root from './components/Root.vue'


Vue.use(Router)
Vue.use(Resource)

var router = new Router({
   history: true,
});

router.map({
  '/': {
    component: Root
  },
});

// Start up our app
router.start(Root, '#app');

创建您的根组件 - 资源/ View / Assets /js/components/Root.vue 
<template>
 <form v-on:submit.prevent="submitForm">
    <input type="text" v-model="formData.username"/>
    <input type="text" v-model="formData.password"/>
 </form>
</template>
<script>
export default {
   data: function() {
      return {
         formData: {
             username: null,
             password: null
         }
      }
   },

   methods: {
      submitForm: function() {
          this.$http.post('/myform', this.formData).then(function(response) {
               alert('Yay, my form was posted!');
          });
      }
   }
}
</script>

此时，您需要在您的 Assets 上运行 webpack，请参阅 Laravel Documentation在 Elixir .

同样，您在没有提供太多背景的情况下提出了一个非常广泛的问题，但这会让您继续前进。

备注:以上代码是 Vue 1.X 上的工作代码，版本 2 略有不同。

有关 Vue 和 Laravel 的进一步帮助，请参阅 Laravel Documentation .

关于laravel - 如何使用 vue.js 获取多个表单元素的值并将它们发送到 Controller ？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34833301/

29 4 0
文章推荐： jQuery jScrollPane - 它根本不起作用! :'(
文章推荐： python - 可读性和效率，哪个更好？ Numpy、元组等？
文章推荐： JavaFX listView int[] 类型的拖动列表项(Java Messsge :-1 )
文章推荐： python - AppEngine 计费即将发生的变化是否意味着异步批量操作将比当前计费模型便宜得多？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com