从表单收集数据，在对象中堆叠并使用 Vue 使用 AJAX 发送

Posted 2023-02-23

【中文标题】从表单收集数据，在对象中堆叠并使用 Vue 使用 AJAX 发送

【英文标题】：Collect data from form, stack in object and send it with AJAX using Vue

【发布时间】：2019-02-10 16:12:09

【问题描述】：

尝试从我的表单中收集所有 html 数据，然后将其存储为一个对象，然后使用 ajax 请求发送它。请问有什么想法吗？感谢一些帮助。我正在尝试使用序列化的 jquery，但是无法使用 ajax(post) 以这种方式发送（到 API URL，没有 php）。

    <form class="form" action="" method="" id="createProposal">
        <div class="form-group">
            <label class="col-md-12 control-label" for="asset-drop">Asset</label>
            <div class="col-md-12">
                <select id="asset-drop" name="asset-drop" class="form-control" >
                                    <option value="1">  this.assets[0] ? this.assets[0].name : ''  </option>
                                    <option value="2"> this.assets[1] ? this.assets[1].name : '' </option>
                                    <option value="3"> this.assets[2] ? this.assets[2].name : '' </option>
                </select>
            </div>
        </div>
        <div class="form-group">
            <label class="col-md-12 control-label" for="amount-invest">Amount</label>
            <div class="col-md-12">
                <input id="amount-invest" name="amount-invest" type="text" placeholder="Currency" class="form-control input-md">
            </div>
        </div>

        <div class="form-group">
            <label class="col-md-12 control-label" for="description-input">Description</label>
            <div class="col-md-12">
                <textarea class="form-control" id="description-input" name="description-input"></textarea>
            </div>
        </div>

        <div class="modal-footer">
            <button type="button" class="btn btn-secondary cancel" v-on:click="hideCreatePropolsal">Cancel</button>
            <button type="submit" class="btn btn-primary create" v-on:click="formDataCreation">Create</button>
        </div>
    </form>

【问题讨论】：

对于这个表单，没有任何 - 整个项目都在 vue 中，但是对于只使用“方法”的表单，所以 - 只有普通的 javascript

您可以将该表单放入组件中，并关联一个脚本，在该脚本中您可以添加一个对象并通过方法发送它

【参考方案1】：

我建议在您的数据部分中创建一个对象，您调用proposal 并使用v-model 将您的表单绑定到该对象，我使用的是单个文件组件但没关系，您可以适合该解决方案你的情况：

<template>
    <form class="form" action="" method="" id="createProposal">
        <div class="form-group">
            <label class="col-md-12 control-label" for="asset-drop">Asset</label>
            <div class="col-md-12">
                <select id="asset-drop" name="asset-drop" class="form-control" v-model="proposal.selectedAsset" >
                                    <option :value="index" :key="index" v-for="(asset,index) in proposal.assets">asset  </option>
                                  
                </select>
            </div>
        </div>
        <div class="form-group">
            <label class="col-md-12 control-label" for="amount-invest">Amount</label>
            <div class="col-md-12">
                <input id="amount-invest" v-model="proposal.amount" name="amount-invest" type="text" placeholder="Currency" class="form-control input-md">
            </div>
        </div>

        <div class="form-group">
            <label class="col-md-12 control-label" for="description-input">Description</label>
            <div class="col-md-12">
                <textarea class="form-control"  v-model="proposal.description" id="description-input" name="description-input"></textarea>
            </div>
        </div>

        <div class="modal-footer">
            <button type="button" class="btn btn-secondary cancel" v-on:click="hideCreatePropolsal">Cancel</button>
            <button type="submit" class="btn btn-primary create" v-on:click="formDataCreation">Create</button>
        </div>
    </form>
</template>

<script>
export default 
  data()
    return
      proposal:
        assets:[],
        selectedAsset:'',
        amount:'',
        description:''
      
    
  ,
  methods:
    hideCreatePropolsal()

    ,
    formDataCreation()
      /*   $.ajax(
                url: "yourUrl",
                type: "POST",
                data:this.proposal,
                success: function (response) 
                 
                );*/
    
  
;
</script>

<style>
</style>

您可以查看whole code