$ .ajax无法正常运行 - 返回index.html

时间:2015-11-09 05:27:58

标签: javascript jquery json ajax

我正在尝试编写一个函数,允许我停止在每个表单和我想要使用它的元素上写入冗余的ajax请求。这是一个非常简单的概念,但我似乎无法弄清楚它有什么问题。我只得到一个错误,但它与坏令牌有关,因为json无效但如果我删除了json函数,它什么也没做。如果我使用返回的数据填充容器,我只需获得索引页的副本。如果这有所不同,这将从索引页面运行。

我很好奇是否有人看到我在这里错过的任何错误......

谢谢!

这是代码

$(document).ready(function(){
/* ajax request standard functions 
    Optional attributes:
        loadtype[html]: prepend, append, html(*complete page load*)
        ajaxcon[error]: container to be affected by ajax
        method[GET]: post/get
        loader[progress1]: alternate load image other than the standard 

*/
$(document).on('click', '.ajaxMe', function(e){
    e.preventDefault();

    var el = $(this); //a, li, form
    var tag = el.prop('tagName'); //a, li, form
        if(tag == 'FORM'){aType = 1;}else{aType = 2;} //sets default to a/li
    var method = el.attr('method');
        if(!method) method = 'GET'; //default method
    var ajaxcon = el.attr('ajaxcon');
        //if there's no ajax container to receive the data, return an error 
        if(!ajaxcon && aType != 1){
            //later on, this should call a function that pops up the error box instead of an alert
            alert("There seems to be a code error. Please contact support or try again later");
            return false;
        }
    var loadtype = el.attr('loadtype');
        if(!loadtype) loadtype = 'html'; //default loadtype set to html
    var altloader = el.attr('altloader');
        if(!altloader) altloader = 'http://localhost/mgo/img/gifs/loader.gif'; //default wait image

    //set the variables that are determined by the parent element type
    if(aType == 1){
        var href = el.attr('action');
        var sdata = el.serialize(); //We can serialize the data of all forms without checking because checking is going to be done on the php side from now on
    }else if(aType == 2){
        var href = el.attr('href');
        var sdata = el.attr('rel');
    }

    /*JSON return layout:
        return{
            status: 0/1 -- included in case there is additional checking on the jquery side before/instead php redirect
            message: message to display if bad
            badInputs: inputs to highlight
        }
    */

    alert(sdata);
    $.ajax({
        type: method,
        URL: href,
        data: sdata,
        success: function(ret){ //return is always going to be JSON
            if(aType == 1){
                //if data gets returned, it's an error. if no error, the php takes over and forces the next page
                var r = $.parseJSON(ret);
                el.find('.TopMsg')[loadtype](r.message);
            }else if(aType == 2){
                ajaxcon[loadtype](ret);
            }
        }
    });
});
});

修改 为了更好的衡量,我正在添加html和php

HTML

<form class = 'Frm-cb ajaxMe' id = 'frmsignup' action = 'http://localhost/mgo/modules/signup/php/signup1.php'>
<h1 style = 'background-color: green;'>Sign up now for all the benefits of MGo!</h1>

    <div class = 'TopMsg'></div>

    <label>email</label>
    <input type = 'text' name = 'email' id = 'email'>

    <label>confirm email</label>
    <input type = 'text' name = 'email2' id = 'email2'>

    <label>password</label>
    <input type = 'password' name = 'password' id = 'password'>

    <label>confirm password</label>
    <input type = 'password' name = 'password2' id = 'password2'>

    <label>zip code</label>
    <input type = 'text' name = 'zip' id = 'zip' maxlength = '5'>

    <button type = 'submit'>finish</button>
</form>

PHP

<?

/*
    This script is going to do the data validation for the jQuery so users can't hard code the scripts to change validation rules.
    The output is JSON. 
        JSON output map:
        [return]
            [status]
            [badInputs]
                [inputname]
            [msg]
            [addClass]
            [changeClass]
*/

include_once "C:/xampp/htdocs/mgo/scripts/php/connect/gen_user_db_connect.php";
include_once "C:/xampp/htdocs/mgo/scripts/php/validate/dataValidation.php";

$bi = array();
$msg  = "";
$stat = 1;

$e1 = $_GET['email'];
$e2 = $_GET['email2'];
$p1 = $_GET['password'];
$p2 = $_GET['password2'];
$zip = $_GET['zip'];

$inputs = array("0", "username", "text");

$eChk = validate($e1)['email'];
$pChk = validate($p1)['len'];
$zChk = validate($zip);

if($eChk == 0){
    $msg .= "Please enter a valid email address\n";
    array_push($bi, "#email");
    $stat = 0;
}

if($e1 != $e2){
    $msg .= "Emails don't match\n";
    array_push($bi, "#email2");
    $stat = 0;
}

if($pChk < 6){
    $msg .= "Password must be a minimum of 6 characters\n";
    array_push($bi, "#password");
    $stat = 0;
}

if($p1 != $p2){
    $msg .= "Passwords don't match\n";
    array_push($bi, "#password2");
    $stat = 0;
}

if($zChk['num'] == 0){
    $msg .= "Must enter a valid zip code\n";
    $stat = 0;
}

$return = json_encode(array("msg" => "<pre>$msg</pre>",
                           "status" => $stat,
                           "badInputs" => $inputs));

echo $return;
?>

2 个答案:

答案 0 :(得分:1)

URL参数的名称不应大写 - “url”不是“URL”。

答案 1 :(得分:0)

  1. 在服务器端进行前端脚本验证(检查篡改)似乎很奇怪,因为如果有人可以篡改脚本,那么他可以轻松篡改正在发送的脚本数据,因此没有安全性这里。

  2. 尝试将dataType:json添加到a​​jax调用中。

  3. die();添加到php脚本的末尾以进一步终止执行。

  4. 所以这应该使您的代码成为......

    <强> JS

    ....
    
    alert(sdata);
    $.ajax({
        type: method,
        URL: href,
        data: sdata,
        dataType:json,
        success: function(ret){ //return is always going to be JSON
    ....
    

    <强> PHP

    ....
    
    $return = json_encode(array("msg" => "<pre>$msg</pre>",
                               "status" => $stat,
                               "badInputs" => $inputs));
    
    echo $return;
    die();
    ?>