Question

我使用此代码（http://technologymantrablog.com/dynamic-combobox-ajax-php-mysql/）从我的数据库获取国家/州/城市到php / html选择。它的注册形式非常完美。一切都好！问题是，用户在系统注册后，他可以尝试编辑您的注册/个人资料。然后，再次显示国家/州/市的选择。而且存在问题。如果我使用javascript中相同的ID，它就无法工作。如果我尝试更改ID并更改javascript，也不会有效。调用两个函数和两个不同的文件也不会起作用。

getSelects.php

function getStatus() {

    if (window.XMLHttpRequest) {
    xmlhttp3 = new XMLHttpRequest();
  } else { 
    xmlhttp3 = new ActiveXObject("Microsoft.XMLHTTP");
  }
  xmlhttp3.onreadystatechange=function() {
    if (xmlhttp3.readyState==4 && xmlhttp3.status==200) {
      document.getElementById("inputStatus").innerHTML=xmlhttp3.responseText;
    }
  }
  xmlhttp3.open("GET","includes/getStatus.php",true);
  xmlhttp3.send();
}


function getMotivo(statusID) {
    if (window.XMLHttpRequest) {
    xmlhttp3 = new XMLHttpRequest();
  } else { 
    xmlhttp3 = new ActiveXObject("Microsoft.XMLHTTP");
  }
  xmlhttp3.onreadystatechange=function() {
    if (xmlhttp3.readyState==4 && xmlhttp3.status==200) {
      document.getElementById("inputMotivo").innerHTML=xmlhttp3.responseText;
    }
  }
  xmlhttp3.open("GET","includes/getMotivo.php?statusID="+statusID,true);
  xmlhttp3.send();
}


function getComplemento(motivoID) {
    if (window.XMLHttpRequest) {
    xmlhttp3 = new XMLHttpRequest();
  } else { 
    xmlhttp3 = new ActiveXObject("Microsoft.XMLHTTP");
  }
  xmlhttp3.onreadystatechange=function() {
    if (xmlhttp3.readyState==4 && xmlhttp3.status==200) {
      document.getElementById("inputComplemento").innerHTML=xmlhttp3.responseText;
    }
  }
  xmlhttp3.open("GET","includes/getComplemento.php?motivoID="+motivoID,true);
  xmlhttp3.send();
}

包含了

状态：

echo '<select onchange="getMotivo(this.value);" class="form-control" name="status" id="status">';

echo 
'<option value="">-- Selecione --</option>
<option value="0">Bloqueado</option>
<option value="1">Ativo</option>';

echo'</select>';

Motivo：

include("../lib/conexao.php");

$statusID = $_GET['statusID'];

echo '<select onchange="getComplemento(this.value);" class="form-control" name="motivo" id="motivo">';
echo '<option value="" selected>-- Selecione um Motivo --</option>';
$q = "SELECT * FROM motivo WHERE status = '$statusID' AND tipo = 'C' ORDER BY motivo";
if($res = $con->query($q))
{
while($obj = $res->fetch_object())
{
echo'<option value="'. $obj->motivoID .'">'. $obj->motivo .'</option>';
}
}
echo'</select>';

Complemento：

include("../lib/conexao.php");

$motivoID = $_GET['motivoID'];


if($motivoID == 2 || $motivoID == 4 || $motivoID == 5 || $motivoID == 6 || $motivoID == 8 || $motivoID == 9) {
echo '<label for="complemento">Complemento</label>';
echo '<input type="text" name="complemento" class="form-control" id="complemento" placeholder="Insira o Complemento">';
}

的header.php：

<script>
function init() {
getStatus();
}
</script>

</head>

<body onload="init();">

我想如果我在这里发布所有代码文件会很长。但是，根据我在第一段中的文字，我想我可以解释我想要做的事情。

Answer 1

我不知道这是否有助于解决您的问题（希望如此）但我提到使用或多或少的通用ajax函数并将其用于大部分工作，所以这就是我的意思。 / p>

function _ajax( url, options ){
    var factories=[
        function() { return new XMLHttpRequest(); },
        function() { return new ActiveXObject('Msxml2.XMLHTTP'); },
        function() { return new ActiveXObject('MSXML2.XMLHTTP.3.0'); },
        function() { return new ActiveXObject('MSXML2.XMLHTTP.4.0'); },
        function() { return new ActiveXObject('MSXML2.XMLHTTP.5.0'); },
        function() { return new ActiveXObject('MSXML2.XMLHTTP.6.0'); },
        function() { return new ActiveXObject('Microsoft.XMLHTTP'); }
    ];
    /* Try each factory until we have a winner */
    for( var i=0; i < factories.length; i++ ) {
        try { var req = factories[ i ](); if( req!=null ) { break; } }
        catch( err ) { continue; }
    };

    var method=options.hasOwnProperty('method') ? options.method.toUpperCase() : 'POST';
    var callback=options.hasOwnProperty('callback') ? options.callback :false;

    if( !callback ){
        alert( 'No callback function assigned - a callback is required to handle the response data' );
        return false;
    }

    var headers={
        'Accept': "text/html, application/xml, application/json, text/javascript, "+"*"+"/"+"*"+"; charset=utf-8",
        'Content-type': 'application/x-www-form-urlencoded',
        'X-Requested-With': 'XMLHttpRequest'
    };

    /* The main parameters of the request */
    var params=[];
    if( options.hasOwnProperty('params') && typeof( options.params )=='object' ){
        for( var n in options.params ) params.push( n + '=' + options.params[n] );
    }

    /* Additional arguments that can be passed to the callback function */
    var args=options.hasOwnProperty('args') ? options.args : options;

    /* Assign callback to handle response */
    req.onreadystatechange=function(){
        if( req.readyState==4 ) {
           if( req.status==200 ) options.callback.call( this, req.response, args );
           else console.warn( 'Error: '+req.status+' status code returned' );
        }
    }

    /* Execute the request according to desired method: other methods could be added here */
    switch( method ){
        case 'POST':
            req.open( method, url, true );
            for( header in headers ) req.setRequestHeader( header, headers[ header ] );
            req.send( params.join('&') );
        break;
        case 'GET':
            req.open( method, url+'?'+params.join('&'), true );
            for( header in headers ) req.setRequestHeader( header, headers[ header ] );
            req.send( null );
        break;  
    }
}







/*
    example usage:
    --------------
*/
function getStatus() {
    _ajax.call( this, '/includes/getStatus.php',{ callback:cb_ajax, method:'get', args:{ id:'inputStatus' } } );
}
function getMotivo( statusID ) {
    _ajax.call( this, '/includes/getMotivo.php',{ callback:cb_ajax, method:'get', params:{ 'statusID':statusID }, args:{ id:'inputMotivo' } } );
}
function getComplemento( motivoID ) {
    _ajax.call( this, '/includes/getMotivo.php',{ callback:cb_ajax, method:'get', params:{ 'motivoID':motivoID }, args:{ id:'inputComplemento' } } );
}

/* The callback function */
function cb_ajax( r, o ){
    console.info( 'ajax response: %s, args: %s', r, o );
    if( o.hasOwnProperty( 'id' ) && document.getElementById( o.id ) ) document.getElementById( o.id ).innerHTML=r;
}




html form
---------

    <form name='so_test_motivo' method='post' action='/test/target.php' enctype="multipart/form-data">
        <select name='country' onchange='getStatus()'>
            <option value=0 selected> Choose an option
            <option value=1> Test
        </select>

        <select id='inputStatus' name='inputStatus' onchange='getMotivo(this.value)'>
        </select>

        <select id='inputMotivo' name='inputMotivo' onchange='getComplemento(this.value)'>
        </select>   

        <select id='inputComplemento' name='inputComplemento'>
        </select>           
    </form>

为了测试的目的，php脚本/test/target.php只是像这样发送虚拟数据：

$id=$_GET['id'];                
for( $i=0; $i < 50; $i++ ) echo '<option value='.( ( $i+1 ) + $id ).'>Option - '.( ( $i+1 ) + $id ).PHP_EOL;

两个不同元素的JavaScript ID作为相同的函数工作

1 个答案: