CodeigniterでonkeyupイベントのAjax関数を取得する方法

Question

VIEWフォルダに2つのファイル：addcustomer.phpとphoneError.phpがあります。

addcustomer.php

<input type="text" id="textHint" onKeyUp="showHint(this.value)" name="phone" placeholder="1235558888"> 
<span id="txtHint"></span> 

<script type="text/javascript" > 
    function showHint(str) { 
     var base_url = <?php echo base_url(); ?> 
     if (str.length == 0) { 
      document.getElementById("txtHint").innerHTML = ""; 
      return; 
     } 
     else { 
      var xmlhttp = new XMLHttpRequest(); 
      xmlhttp.onreadystatechange = function() { 
       if (this.readyState == 4 && this.status == 200) { 
        document.getElementById("txtHint").innerHTML = this.responseText; 
       } 
      }; 

      // Get $p from phoneError.php 
      (xmlhttp.open("GET", "phoneError.php?p=" + str, true)); 
      xmlhttp.send(); 
     } 
    } 
</script> 

<input type="text" id="textHint" onKeyUp="showHint(this.value)" name="phone" placeholder="1235558888"> 
<span id="txtHint"></span> 

phoneError.php

<?php 
    defined('BASEPATH') || exit('No direct script access allowed'); 

    $p = $_REQUEST['p']; // required 

    $string_exp = "/^[0-9]{3}[0-9]{3}[0-9]{4}$/"; 


    if ($p == !preg_match($string_exp, $p)) { 
     echo $error_message .= '<span style="color:red">Oops! The Phone you entered  does not appear to be valid.</span>'; 
    } 
?> 

私は、入力された有効な電話番号を確認するためにaddcustomer形式でonkeyupイベントにAjaxの機能を追加したいです。私はaddcustomerメソッドを呼び出して、コントローラにphoneErrorをロードしましたが、動作しませんでした。 xmlhttp.open "GET"の正しいURLを入力したかどうかわかりません。

Answer 1

Codeigniterを使用している場合は、基本的な構造を知っている必要があります。 だからあなたのビューをロードする同じコントローラファイルにPHPコードを入れて、HTML側でIDとしてスパンの

変更IDが同じページに一意である必要があります

public function phoneError(){ 
    // your php code.. 
} 

として名前を付けます。

入力タグでこの

<span id="txtResult"></span> 

と

<span id="txtHint"></span>

を交換は、ATTRをonKeyUpを取り除きます。 だからこの

<input type="text" id="textHint" name="phone" placeholder="1235558888"> 

と交換して、今これを試してください

<input type="text" id="textHint" name="phone" placeholder="1235558888" value=""> 
     <span id="txtResult"></span> 

     <script type="text/javascript" > 
       $(document).ready(function() { 

        $("#textHint").keyup(function() { 
         var str = $(this).val(); 
         $.get("http://localhost/sitename/controllername/phoneError?p=" + str, function (data) { 
          $("#txtResult").html(data); 
         }); 
        }); 
       }); 
      </script> 

addCustomer.php

として

jsの

の何らかの変化は、そこで、基本的ビューファイルです。

Answer 2

目的に合わせてこのjqueryコードを使用できます。このコードは、あなたが望むのとまったく同じです。

$("#textHint").keyup(function() { 
    $.get("phoneError.php?p=" + $(this).val(), function (data) { 
     $("#txtHint").html(data); 
    }); 
});