使用 vue.js 和 axios 防止表单提交答案

【问题标题】：Prevent form from submitting with vue.js and axios使用 vue.js 和 axios 防止表单提交
【发布时间】：2018-08-16 04:06:07
【问题描述】：

我的问题是，当我单击其中一个按钮时，它会将我重定向到 action="/validarfavorite.php"，我只想提交表单而不刷新页面。这是我的代码：

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
            <?php
echo"
<form method=\"POST\" @submit.prevent=\"onSubmit\" action=\"/validarfavorite.php\" style=\"display:inline-block\">
<div id=\"app\">";
if($row_cnt == 0) {
  echo"
<button type=\"submit\" value=\"Add to favorites\" style=\"font-weight: 700;color:#428bca;margin-left:30px;height:30px;border-radius:4px\" name=\"favorites\" @click=\"show = !show\" v-if=\"show\">Add to favorites</button>
";}
if($row_cnt == 0) {
  echo"
<button type=\"submit\" value=\"Delete from favorites\" style=\"font-weight: 700;color:#428bca;margin-left:30px;height:30px;border-radius:4px\" name=\"delete\" @click=\"show = !show\" v-else>Delete from favorites</button>
</div>
";}
echo"</form>";
?>


    <script>
new Vue({
  el:'#app',
  data:{
    show: true
  },
  methods: {
          onSubmit: function() {
            axios.post('/validarfavorite.php')
          }
        }
});
</script>

如果由于某种原因您需要 validarfavorite.php。但这运作良好。

<?php
// ini_set('display_errors', 1);
// ini_set('display_startup_errors', 1);
// error_reporting(E_ALL);
include('config.php');

$get_palette_id = $_REQUEST['id'];
$select_palette = mysqli_query($con, "SELECT id FROM palettes WHERE id = '$get_palette_id'");
$row = mysqli_fetch_array($select_palette);
$palette_id = $row['id'];
$amount_of_favorites = mysqli_query($con,"SELECT * FROM favorites where paletteid = '$palette_id'");
$row_cnt = mysqli_num_rows($amount_of_favorites);

// if(isset($_COOKIE["type"])){

if (isset($_POST['favorites']) && ($_POST['favorites'] == 'Add to favorites')) {
//el select del id de la paleta esta lo mas arriba por el num rows

  $cookie_id = $_COOKIE["type"];
  $select_userid = mysqli_query($con,"SELECT * FROM users WHERE cookie = '$cookie_id'");
  $row = mysqli_fetch_array($select_userid);
  $user_id = $row['id'];

  $insert_palette_id = mysqli_query($con,"INSERT INTO favorites ( paletteid, userid ) VALUES ('$palette_id','$user_id');");
}

if (isset($_POST['delete']) && ($_POST['delete'] == 'Delete from favorites')) {
  $cookie_id2 = $_COOKIE["type"];
  $select_userid2 = mysqli_query($con,"SELECT * FROM users WHERE cookie = '$cookie_id2'");
  $row = mysqli_fetch_array($select_userid2);
  $user_id2 = $row['id'];
  $delete_palette_id = mysqli_query($con,"DELETE FROM favorites WHERE paletteid = '$palette_id' AND userid = '$user_id2'");
}
?>

请帮忙，我只剩下这个了

【问题讨论】：

标签： php vue.js axios

【解决方案1】：

您正确使用了@:submit.prevent="onSubmit"，只需删除表单操作并处理您的onSubmit 函数中的所有内容。

PD。您可能还需要将信息发送到您的 axios.post（表单数据），目前您只做一个空 POST

【讨论】：

我认为问题在于 type="submit"，我应该使用 type="button"。但我不知道如何识别是否使用 php 点击了 type="button"。
考虑到你的方式，我应该把查询放在哪里？
使用提交是标准方式，您可以使用 botton 并检查它是否被更多 js 点击，但没有这种情况。
另一方面，查看 axios 文档以了解如何发送数据。然后更改您的 php 以处理该数据。

【解决方案2】：

我对 Vue 或 Axious 一无所知，但总的来说... 不要使用类型为“提交”的按钮，而是将类型设置为“按钮”，因此...<button type=\"button\" ... />这将允许按钮与表单提交分离。

【讨论】：

【解决方案3】：

为使事情更简单，请在该表单中添加id，例如：

echo"
<form id="favoriteForm" method=\"POST\" @submit.prevent=\"onSubmit\" action=\"/validarfavorite.php\" style=\"display:inline-block\">
<div id=\"app\">";

然后您可以get the FormData from the <form> 并使用'Content-Type': 'multipart/form-data' 提交：

new Vue({
  el: '#app',
  data: {
    show: true
  },
  methods: {
    onSubmit: function() {
      axios({
          method: 'post',
          url: '/validarfavorite.php',
          data: new FormData(document.getElementById("favoriteForm")),
          config: {
            headers: {'Content-Type': 'multipart/form-data'}
          }
      })
      .then(function(response) { console.log('success', response); })
      .catch(function(response) { console.log('error', response); });
    }
  }
});

【讨论】：