代码之家  ›  专栏  ›  技术社区  ›  Irfandy Jip

通过页面传递变量时,VueJS Axios POST返回NULL

  •  2
  • Irfandy Jip  · 技术社区  · 7 年前

    我已经试了好几个小时来理解这一点,并重新检查StackOverflow的答案。也试过复制粘贴,没用。

    var app = new Vue({
      el: '#app',
      data: {
        jobtype_select: '',
        jobtype_list: [{
            id_JobType: 'JTY0001',
            name_JobType: 'Survey'
          },
          {
            id_JobType: 'JTY0002',
            name_JobType: 'Research'
          },
          {
            id_JobType: 'JTY0003',
            name_JobType: 'Maintenance'
          }
        ],
        woFormABCD: '',
        totallyRandom: 'Hello Heiayo'
      },
    
      methods: {
        recordTESTWo() {
          var form = new FormData();
          form.append('test', this.totallyRandom);
          axios.post('action.php',
              form
            )
            .then(function(response) {
              alert('Success!');
              console.log(response);
            })
            .catch(function(error) {
              console.log(error);
            });
        }
      }
    
    });
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    
    <div id='app'>
      <form method="post" action="action.php" @submit.capture='recordTESTWo'>
        <div class="">
          <label for="jobtype_id" class="control-label required"><strong>Choose Job Type</strong></label>
          <div v-for='jobtype in jobtype_list'>
            <label class="">
                                <input  type="radio" 
                                        id= 'jobtype_id'
                                        v-model= 'jobtype_select'
                                        :value="jobtype.id_JobType"
                                        name='jobtype_select' 
                                        > 
                                {{jobtype.name_JobType}}
                            </label>
          </div>
          <p> This is : {{jobtype_select}}</p>
        </div>
        <div>
          <button>Submit</button>
        </div>
      </form>
    </div>

    我想做的就是通过考试 totallyRandom 值到下一页。哪个是 action.php .

    <?php
        session_start();
        //$data = json_decode(file_get_contents("php://input"), TRUE);
        printf("This is GET: \r\n");
        var_dump($_GET);
        printf("This is POST: \n");
        var_dump($_POST);
    ?>
    

    我希望看到的是, 变量 传递给 动作.php 第页。

    我看到的是, 另外,当我转到action.php并执行var\u dump时,它会返回NULL。单选按钮已通过,但未使用Axios。更多细节可以问,

    Picture

    1 回复  |  直到 7 年前
        1
  •  2
  •   Phil    7 年前

    问题是你的 <form> 正在正常提交。所以你才会看到 jobtype_select test .

    通过使用 .prevent event modifier .capture

    <form @submit.prevent="recordTESTWo" ...
    

    仅供参考, .捕获 是给。。。

    以内部元素为目标的事件在被该元素处理之前在这里处理

    useCapture addEventListener() .防止 preventDefault() 关于这个事件。