从jQuery调用PHP验证文件

Question

HTML Code:

I have done validation with jquery.. Now my next task is to call a php file from jquery, and do validation in page2.php and then submit it to database. Once database submission is done then call the index.php. But the problem I am facing here is that when I call page2.php from jquery nothing is happening. ITs not leading me there. Could anybody please help me with this problem.

 $(document).ready(function() { $("#errorBox").html("Hello1243 by JQuery"); $("#reg").click(function(e) { //document.write("Name="+name); var email = $("#eml").val(); var pwd = $("#pwd").val(); var cpassword = $("#cpwd").val(); if (email == '' || pwd == '' || cpassword == '' ) { e.preventDefault(); $("#errorBox").html("Please fill in all the fields. All the * marked fields are important"); //alert("Please fill in all fields"); } else if ((password.length) < 8) { e.preventDefault(); $("#errorBox").html("Password must be atleast 8 character long"); //document.getElementById("errorBox").innerHTML = ; } else if (!(password).match(cpassword)) { e.preventDefault(); $("#errorBox").html("Password don't match"); //document.getElementById("errorBox").innerHTML = ; } else if (IsEmail(email) == false) { e.preventDefault(); $("#errorBox").html("Please enter correct email id"); } else { e.preventDefault(); $.ajax({ type: "POST", url: "page2.php", data: jQuery("#my_form").serialize(), cache: false, success: function(data) { alert(data); /*if json obj. alert(JSON.stringify(data));*/ }, error: function() { alert("error"); } }); } }); }); function IsEmail(email) { var regex = /^([a-zA-Z0-9_\\.\\-\\+])+\\@(([a-zA-Z0-9\\-])+\\.)+([a-zA-Z0-9]{2,4})+$/; if (!regex.test(email)) { return false; } else { return true; } } 

 sup { color: red; } .paddi { padding: 10px; } input[type="text"] { width: 300px; } input[type="password"] { width: 300px; } .mar { margin-top: 100px; } #errorBox { color: red; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="container"> <div class="col-md-offset-6 col-md-6 paddi"> <a href="#"><button class="btn btn-lg"><strong>Already a member. Please Sign In</strong></button> </a> </div> <div class="mar"> <form class="form-horizontal" id="my_form" role="form" method="POST" action="#"> <div class="panel panel-primary"> <div class="panel-heading text-center"> <h4> Become a member now. Register with us for free </h4> </div> <div class="panel-body"> <div id="errorBox"></div> <div class="page-header paddi"> <h4> Create Login Details </h4> </div> <div class="form-group row"> <label class="control-label col-md-3 text-right" for="email"> Enter your Email id<sup>*</sup>: </label> <div class="col-md-7"> <input type="text" name="eml" id="eml" /> </div> </div> <div class="form-group"> <label class="control-label col-md-3 text-right" for="pwd"> Password<sup>*</sup> : </label> <div class="col-md-7"> <input type="password" name="pwd" id="pwd" /> </div> </div> <div class="form-group"> <label class="control-label col-md-3 text-right" for="cpwd"> Confirm Password<sup>*</sup> : </label> <div class="col-md-7"> <input type="password" name="cpwd" id="cpwd" /> </div> </div> <div class="form-group"> <label class="control-label col-md-3 text-right" for="el"> Upload your Resume Document <sup>*</sup> : </label> <div class="col-md-7"> <input id="lefile" type="file" style="display:none"> <div class="input-append"> <input id="photoCover" class="input-large" type="text"> <a class="btn btn-primary" onclick="$('input[id=lefile]').click();">Browse</a> </div> <script type="text/javascript"> $('input[id=lefile]').change(function() { $('#photoCover').val($(this).val()); }); </script> </div> </div> <div class="control-group"> <!-- Button --> <div class="controls col-md-offset-3 col-md-2"> <button class="btn btn-success" id="reg">Register</button> </div> </div> </div> </div> </form> </div> </div> 

Answer 1

There is a problem in your AJAX request. You are not sending data correctly, it should be:

$.ajax({
  type: "POST",
  url: "page2.php",
  data: {data: jQuery("#my_form").serialize()},
  cache: false,
  dataType: 'JSON',
  success: function(data) {
    alert(data);
    /*if json obj. alert(JSON.stringify(data));*/
  },
  error: function() {
    alert("error");
  }
});