$.ajax工作不正常-返回index.html

$.ajax not functioning correctly - returns index.html

本文关键字:返回 index html 不正常 ajax 工作      更新时间:2023-09-26

我正在尝试编写一个函数,该函数允许我停止在要与之一起使用的每个表单和元素上编写冗余的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;
?>

URL参数的名称不应该大写——"URL"而不是"URL"。

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

  2. 尝试将dataType:json添加到ajax调用中。

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

所以这应该使你的代码成为…

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();
?>