Question

我只是尝试使用jquery ajax提交表单，并且我使用FormData但是每当我点击提交按钮时页面重新加载而不显示任何类型的错误或任何类型的结果。

这是表单部件名称是regpage.php

<!DOCTYPE html>
<html>
<head>
    <title>reg form</title>

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

              <script type="text/javascript" src="jquery-1.11.3-jquery.min.js"></script>

                <script type="text/javascript" src="script.js"></script>
    <style type="text/css">
        #d1
        {
            width: 400px;
            height: auto;
            border: 1px solid;
            text-align: center;
            margin: 0 auto;
        }
    </style>
    </head>





</head>
<body>
<form id="form"  method="post" enctype="multipart/form-data">
<div id="d1">

<h1>Regestration form</h1>
username:<input type="text" name="uname" id="username" placeholder="username"><br>
password:<input type="password" name="pass" id="password" placeholder="password"><br>
email:<input type="text" name="email" id="email" placeholder="email"><br>
<span>Hobby</span>
<input type="checkbox" name="cric[]"  value="cricket">Cricket
<input type="checkbox" name="cric[]"  value="kite">Kite
<input type="checkbox" name="cric[]"  value="zym">ZYM<br>

<h2>Gender</h2>
<input type="radio" name="chack" id="d3" value="male">male
<input type="radio" name="chack" id="d3" value="female">female<br>
<input type="file" name="image" action="image/*" ><br>
<input type="submit" name="sub" value="sign up"   ><br>

</div>
</form>
<div id="output" ></div>
<script >
$(document).ready(function (e) {
    $("#form").on('submit',(function(e) {

        e.preventDefault();
        $.ajax({

            url: "aform.php",
            type: "POST",
            data:  new FormData(this),
            contentType: false,
            cache: false,
            processData:false,
            beforeSend : function()
            {
                //$("#preview").fadeOut();
                $("#output").fadeOut();
            },
            success: function(data)
            {
                if(data=='invalid')
                {
                    // invalid file format.
                    $("#output").html("Invalid File !").fadeIn();
                }
                else
                {
                    // view uploaded file.
                    $("#preview").html(data).fadeIn();
                    $("#form")[0].reset();  
                }
            },
            error: function(e) 
            {
                $("#output").html(e).fadeIn();
            }           
       });
    }));
});

</script>    
</body>
</html>

现在这是我尝试发送表单的页面

    <?php


print_r($_POST);

$valid_extensions = array('jpeg', 'jpg', 'png', 'gif', 'bmp'); // valid extensions
$path = 'uploads/'; // upload directory


if(isset($_FILES['image']))
{
extract($_POST);

  $hobby=implode(',','cric');

  $img = $_FILES['iname']['name'];
  $tmp = $_FILES['iname']['tmp_name'];

  // get uploaded file's extension
  $ext = strtolower(pathinfo($img, PATHINFO_EXTENSION));

  // can upload same image using rand function
  $final_image = rand(1000,1000000).$img;



  // check's valid format
  if(in_array($ext, $valid_extensions)) 
  {         
    $path = $path.strtolower($final_image); 

    if(move_uploaded_file($tmp,$path)) 
    {
      $con=mysqli_connect("localhost","root","","users");

      $qry="insert into abcd(username,password,email,hobby,gender,image)values('$uname','$pass','$email','$hobby','$chack','$image') ";

      mysqli_query($con,$qry);

      //print_r($run);
      echo "<img src='$path' />";
    }
  } 
  else 
  {
    echo 'invalid';
  }
}


?>

我在做什么错误，任何人都可以告诉我这件事吗？

Answer 1

将事件处理程序添加到提交按钮（不是主窗体）。

不要使用$（document）.ready（function（e）//这里给你控制台中的错误preventDefault（）不是函数。

所以只添加到特定的点击。

//提供一些ID来提交按钮，例如id =＆＃34;提交＆＃34; （为了方便）

$('#submit').click(function(e){
   e.preventDefault();

  // do your rest of the code

});

我正在使用php＆amp;提交表单jquery ajax使用formdata但url部分似乎无法正常工作

1 个答案: