Question

我在模态窗口中有一个表单。当我通过ajax提交表单时，我没有收到成功消息。我的目的是在提交表单后看到在模式中的php文件中创建的消息。这是代码：

<p><a class='activate_modal' name='modal_window' href='#'>Sign Up</a></p>   
<div id='mask' class='close_modal'></div>

<div id='modal_window' class='modal_window'>
    <form name="field" method="post" id="form">
        <label for="username">Username:</label><br>
        <input name="username" id="username" type="text"/><span id="gif"><span>   
        <span id="user_error"></span><br><br>
        <label for="email">Email:</label><br>
        <input name="email" id="email" type="text"/><span id="gif3"></span>    
        <span id="email_error"></span><br><br>
        <input name="submit" type="submit" value="Register" id="submit"/>
    </form>
</div>

modal.js

    $('.activate_modal').click(function(){

        var modal_id = $(this).attr('name');

        show_modal(modal_id);              
    });

    $('.close_modal').click(function(){

        close_modal();            
    });

$(document).keydown(function(e){

  if (e.keyCode == 27){  

  close_modal();
  }

    });


function close_modal(){       
    $('#mask').fadeOut(500);        
    $('.modal_window').fadeOut(500);    
}

function show_modal(modal_id){
    $('#mask').css({ 'display' : 'block', opacity : 0});
    $('#mask').fadeTo(500,0.7);
    $('#'+modal_id).fadeIn(500);

}

用户注册的test.js

$(function() {
    $('#form').submit(function() {
    $.ajax({
       type: "POST",
       url: "test.php",
       data: $("#form").serialize(),
           success: function(data) {
       $('#form').replaceWith(data);
       }
           });
    }); 
});

和PHP文件

<?php

$mysqli = new mysqli('127.0.0.1', 'root', '', 'project');

    $username = $_POST['username'];
    $email = $_POST['email'];

$mysqli->query("INSERT INTO `project`.`registration` (`username`,`email`) VALUES ('$username','$email')");

$result = $mysqli->affected_rows;

if($result > 0) {
    echo 'Welcome';
} else {
    echo 'ERROR!';
}

?>

Answer 1

尝试将AJAX调用中的返回码放入

$('#modal_window')

而不是

形式

$('#form')

BTW：为什么不使用jQuery的POST或GET方法？它们非常容易使用......

Answer 2

尝试这样的事情。首先使用jquery编写ajax代码。

<script type="text/javascript">

function submitForm()
{

    var str = jQuery( "form" ).serialize();
       jQuery.ajax({
        type: "POST", 
        url:  '<?php echo BaseUrl()."myurl/"; ?>',
        data:  str,
        format: "json",
        success: function(data) {

            var obj =  JSON.parse(data);

            if( obj[0] === 'error')
            {

                 jQuery("#error").html(obj[1]);

             }else{

                    jQuery("#success").html(obj[1]);
                     setTimeout(function () {
                     jQuery.fancybox.close();
                 }, 2500);
                    }
        } 

      });    
}

</script>

在php中编写错误和成功消息的代码，如下所示：

  if(//condition true){
                    echo json_encode(array("success"," successfully Done.."));

                }else{
                    echo json_encode(array("error","Some  error.."));
                }

希望这对你有所帮助。

模态窗口中的jquery / php形式

2 个答案: