Question

我设计了一个简单的页面，用户可以使用html输入名称，密码和图像。我尝试使用ajax将这些数据发送到特定的php页面，但是我无法实现这一点。我怎么做

HTML代码

<?php include('connection.php'); ?>         
    <form id="form" enctype="multipart/form-data">
        <table>
            <tr>
                <td>Name:</td>
                <td><input type="name" id="name"></td>
            </tr>
            <tr>
                <td>Password:</td>
                <td><input type="password" id="pass"></td>
            </tr>
            <tr>
                <td>Photos:</td>
                <td><input type="file" id="photos"></td>
            </tr>
            <tr>
                <td><input type="submit" id="go"></td>
            </tr>
        </table>
    </form>

jQuery和Ajax

<script>
    $(document).ready(function(){
        $('#go').click(function(){      
            var img_name = $('#img_name').val();
            var name = $('#name').val();
            var pass = $('#pass').val();  
            $.ajax({   
                type : "POST",
                url : "singup_submit.php",
                data : { img_name:img_name, name:name, pass:pass},
                success : function(done){
                    alert(done);
                }    
            });    
        });
    });
</script>

Php代码

<?php
    include('connection.php');    
    if(isset($_POST)){   
        $name = $_POST['name'];
        $pass = $_POST['pass'];
        $img_name=$_FILES['img_name']['name'];

        $qr="INSERT INTO data (name,pass,img_name) VALUES ('$name','$pass','$img_name')";
        $ex=mysqli_query($con,$qr) or die(mysqli_error($con));    
        if($ex==1)
            echo 'done';
        else            
            echo 'not done';
}

Answer 1

您没有在ajax请求中发送任何文件。

$(document).ready(function(){
$("#go").on('submit',function(e){
   e.preventDefault()

    $.ajax({
        url: 'singup_submit.php',
        type: 'POST',
        data: new FormData(this),
        contentType: false,
        processData: false,
        success: function(response){
                alert(done);
            },
            error: function(data){
                console.log("error");
                console.log(data);
            }
          },
       });
    });
  });

，然后像现在一样从php中的全局变量获取数据。并为这样的表单字段分配名称

 <form id="form" enctype="multipart/form-data">
    <table>
        <tr>
            <td>Name:</td>
            <td><input type="name" name="name" id="name"></td>
        </tr>
        <tr>
            <td>Password:</td>
            <td><input type="password" name="password" id="pass"></td>
        </tr>
        <tr>
            <td>Photos:</td>
            <td><input type="file" name="img" id="photos"></td>
        </tr>
        <tr>
            <td><input type="submit" name="submit" id="go"></td>
        </tr>
    </table>
</form>

它应该可以工作。

Answer 2

遵循此代码..它可能会对您有所帮助

<script>
    $(document).ready(function(){
        $("#go").click(function(){
            var name    = $("#name").val();
            var pasword = $("#password").val();
            var photos  = $("#photos").val();
            if(name==''||pass==''||photos==''){
              alert("Please Fill All Fields");
            }
            else{
              $.ajax({
                type   : "POST",
                url    : "singup_submit.php",
                data   : formData,
                cache  : false,
                success: function(result){
                alert(result);
                }
              });
            }
            return false;
        });
      });
  </script>

无法从Ajax提取数据到php页面

2 个答案: