如何使用Ajax将数据发送到PHP

时间:2019-04-25 21:51:41

标签: php jquery ajax

我正在使用以下表格:

slivers.add(ItemList(blocs[i], key: UniqueKey()));

这是我的ajax:

<form class="" method="post" action="">
   <input type="hidden" class="old_name" name="old_name" value="<?php echo $dir . '/' . $file; ?>" />               
   <input  type="text" class="new_name form-control" name="new_name" value="" />
   <input type="submit" class="submitmodal rename btn " value="Rename" />                       
</form>

这是php部分// RENAME $(document).on("click", ".rename", function() { var old_name = $(this).val(); //getting value of old name var new_name = $(".new_name").val(); //getting value of new name $.ajax({ url:"actions.php", method:"POST", data:{ old_name:old_name, new_name:new_name }, success:function(data) { $('.echo').html(data); } }); }); ,用于检查他是否获得了值:

actions.php

if( isset($_POST['new_name']) ){ echo $_POST['old_name'] . '<br />' . $_POST['new_name']; 中我完全没有收到回声。代码有什么问题?

2 个答案:

答案 0 :(得分:1)

这是一个经过测试的解决方案。如果不起作用,请指定问题(共享错误消息)

PHP

if( isset($_POST['new_name']) ){
    echo $_POST['old_name'] . ' / ' . $_POST['new_name'];
}

HTML

<form class="" method="post" action="">
    <input type="hidden" class="old_name" name="old_name" value="This is the Old Name" />
    <input  type="text" class="new_name form-control" name="new_name" value="This is the New Name" />
    <button type="submit" class="rename btn" value="Rename">Submit Form</button>
</form>

JQuery

$(function(){ // this configuration will occur after full html is loaded
    $("form").submit(function(e){
        e.preventDefault(); // prevent form default submit action
        var old_name = $(".old_name").val(); //<--use class .old_name
        var new_name = $(".new_name").val();

        $.ajax({
            url:"php/@principal.php",
            method:"POST",
            data:{ old_name:old_name, new_name:new_name },
            success:function(data) {
                console.log(data);
            }
        });
    });
});

请注意,结果将显示在浏览器控制台console.log(data)

答案 1 :(得分:1)

您的示例存在一些问题

  1. 该表单无效。它将发回自身。
  2. 您的提交处理程序不会调用e.preventDefault()
  3. 您不应为表单字段和按钮分类选择器。使用ID和ID选择器。它们注定是独一无二的。

这是一个完整的示例:

<?php
$dir = '/somedir/';
$file = 'somefile.txt';
if (isset($_POST['old_name']) && isset($_POST['new_name']) ) {
    echo $_POST['old_name'] . '<br />' . $_POST['new_name'];
    exit();
}
?>
<!doctype html>
<html lang="">

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>

<body>
    <form id="renameForm" method="POST" action="ajax.php">
        <input type="hidden" class="old_name" id="old_name" name="old_name" value="<?php echo $dir . '/' . $file; ?>" />
        <input type="text" class="new_name form-control" id="new_name" name="new_name" value="" />
        <input type="submit" class="submitmodal rename btn " value="Rename" />
    </form>
    <div id="echo">

    </div>
    <script>
        $("#renameForm").submit(function(e) {
            e.preventDefault();
            var old_name = $("#old_name").val(); //getting value of old name
            var new_name = $("#new_name").val(); //getting value of new name

            $.ajax({
                url: $(this).attr("action"),
                method: $(this).attr("method"),
                data: {
                    old_name: old_name,
                    new_name: new_name
                }
            }).done(function(response){ //
                $("#echo").html(response);
            });
        });
    </script>
</body>

</html>