Question

我的问题是，当我点击其中一个按钮时，它会将我重定向到动作=＆＃34; / 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'");
}
?>

请帮助，我只剩下这个了

Answer 1

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

Answer 2

为简化操作，请在该表单中添加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'提交<：p>

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); });
    }
  }
});

Answer 3

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

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

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

3 个答案: