编辑配置文件：使用ajax和javascript查看数据会收到错误404找不到

Question

level: beginner

I've tried to view my user profile data from database to html page using ajax in javascript file. But I always get 404 Error. I want to view my user profile in the html form, so that user can update it.

I don't know what's wrong with it. Could you help me? Here's my codes.

Thank you.

My php code in server side: newpass.php as a controller

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

class newpass extends CI_Controller {

    function __construct()
    {
        parent::__construct();
        $this->load->model('newpass_model','npmod');
    }

    //to get the user profile
    public function read() {
        $iduser = $this->session->userdata('id');
        if(isset($iduser))
        echo json_encode($this->npmod->getByIdUser($iduser));
    }

    //to edit the user profile
    public function update() {
    $iduser = $this->session->userdata('id');
    $data = array(
        $nm = $this->input->post('nama'),
        $tmp = $this->input->post('tempat'),
        $tgl = $this->input->post('tanggal'),
        $jk = $this->input->post('jeniskelamin'),
        $tb = $this->input->post('tinggi'),
        $bb = $this->input->post('berat'),
        $gol = $this->input->post('golongan'),
        $kt = $this->input->post('kontak'),
        $nokt = $this->input->post('kontak_kel'),
        $emkt = $this->input->post('kontak_em')
    );
        if($$nm=='' || $tgl=='' || $jk=='' || $tb=='' || $bb=='' || $gol=='' || $kt=='' || $nokt=='' || $emkt=='')
        {
            echo "0";
        }
        else
        {
            $this->npmod->update($iduser,$data);
            echo "1";
        }
    }
}
?>

My php code in server side: newpass_model.php as a model

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

class newpass_model extends CI_Model {      

    //to get the user profile
    function getByIdUser($iduser) {
        $iduser = intval( $iduser );

        $query = $this->db->where('iduser',$iduser)->limit( 1 )->get('pasien');

        if( $query->num_rows() > 0 ) {
            return $query->row();
        } else {
            return array();
        }
    }   

    //to edit the user profile
    public function update($iduser,$data) { 
        $this->db->where('iduser',$iduser);
        $this->db->update('pasien',$data);
   }
}
?>

My javascript code in client side: newpass.js

/*Don't forget to add set_ip.js and jquery before you use this script in HTML page to make it work*/
var urlini = seturl();
var part= 'newpass/';

var readUrl   = urlini+part+'read',
    updateUrl = urlini+part+'update';

$( function() {  
    readUsers();
}); //end document ready

//to update profile
function update_profile() {

    name = /^([-a-z0-9_-]{5,50})+$/i.test($("#nama").val());
    bb = /^([-0-9_-])+$/i.test($("#berat").val());

    var form_reg =  $("input").val();
    if(form_reg == "")
    {
        alert("Semua data harus diisi.");
    }
    else if(!name || !bb)
    {
        alert("Terdapat kesalahan atau data kosong pada pengisian data.\nPastikan password Anda sesuai.");
    }
    else
    {
        $.post(urlini+part+'update',
        $('#edit_profile').serialize(),function(msg){
        if(msg == '0')
        {
            alert("Masih ada data yang kosong.");
        }
        else if(msg == '1')
        {
            alert("Data berhasil disimpan!");
            window.location="home.html";
        }
    });
    }
}

function readUsers() {
$.ajax({
        url: readUrl,
        dataType: 'json',
        success: function( response ) {

                $( '#nama' ).val( response.nama);
                $( '#tempat' ).val( response.tempat);
                $( '#tanggal' ).val( response.tanggal);
                $( '#jeniskelamin' ).val( response.jeniskelamin);
                $( '#tinggi' ).val( response.tinggi);
                $( '#berat' ).val( response.berat);
                $( '#golongan' ).val( response.golongan);
                $( '#kontak' ).val( response.kontak);
                $( '#kontak_kel' ).val( response.kontak_kel);
                $( '#kontak_em' ).val( response.kontak_em);
                //--- assign id to hidden field ---
                $( '#userId' ).val( response.id );
            }
    });
} // end readUsers

My javascript code in client side: set_ip.js

//where the set the domain name
var ip = 'localhost';
var urlnya = 'http://'+ip+'/diabet_console/';
function seturl()
{    
    return urlnya;
}

My html code in client side: settings.html

<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1.0"/>
<link rel="stylesheet" type="text/css" href="css/style1.css" />

 <link href="date/kendo.common.min.css" rel="stylesheet">
    <link href="date/kendo.default.min.css" rel="stylesheet">

    <script src="date/js/jquery.min.js"></script>
    <script src="date/js/kendo.web.min.js"></script>
    <script src="date/js/console.js"></script>
    <script src="jq/proses/set_ip.js"></script>
    <script src="jq/proses/newpass/newpass.js"></script>
    <script src="jq/proses/script.js"></script>

<script>
        $(document).ready(function() {
        // create DatePicker from input HTML element
        $("#tanggal").kendoDatePicker({
        start: "date",
        depth: "year",
        format: "dd/MM/yyyy",
        });
    });
    </script>
<title>edc - e diabet consult</title>
</head>
<body>
<h1 align="center">Edit Profile</h1>
<p align="center" class="navigation">
<a href="home.html" title="Kembali ke CPanel">
<img src="ico/home.png">
</a>
<a href="pengaturan.html" title="Change Password">
<img src="ico/pass.png">
</a>
<a href="ranges.html" title="Set Target Range">
<img src="ico/setting.png">
</a>
</p>
<div id="updateDialog">
<form id="edit_profile" action="" method="post">
<p width="50%" align="center">
<strong>Nama Pasien</strong><br>
<input type="text" maxlength="350" id="nama" name="nama"><br>

<strong>Tempat Lahir</strong><br>
<input type="text" maxlength="350" id="tempat" name="tempat"><br>

<strong>Tanggal Lahir</strong><br>
<input type="text" maxlength="350" id="tanggal" name="tanggal" value="01-02-2013"><br>
<br>
<strong>Jenis Kelamin</strong><br>
<input class="float" type="radio" id="jeniskelamin" name="jeniskelamin" value="L">Laki-Laki 
<input class="float" type="radio" id="jeniskelamin" name="jeniskelamin" value="P">Perempuan<br><br>

<strong>Tinggi Badan (cm)</strong><br>
<input type="text" id="tinggi" name="tinggi"><br>

<strong>Berat Badan (kg)</strong><br>
<input type="text" id="berat" name="berat" value=''><br>

<strong>Golongan Darah</strong><br>
<input class="float" type="radio" id="golongan" name="golongan" value="A">A 
<input class="float" type="radio" id="golongan" name="golongan" value="B">B
<input class="float" type="radio" id="golongan" name="golongan" value="AB">AB
<input class="float" type="radio" id="golongan" name="golongan" value="O">O<br>
<br>

<strong>Kontak Pasien</strong><br>
<input type="text" id="kontak" name="kontak" value=''><br>

<strong>Kontak Keluarga</strong><br><br>
<strong>No.Telepon</strong><br>
<input type="text" id="kontak_kel" name="kontak_kel" value=''><br>

<strong>Email</strong><br>
<input type="text" id="kontak_em" name="kontak_em" value=''><br>

<input type="submit" value="Simpan" id="simpan" class="button" onclick="update_profile()">
<input type="reset" value="Reset" class="button">

</p>
<br><br/>
</form>
</div>
</body>
</html>

Answer 1

Try to use the fiddler to check what is the URL being requested through AJAX call or developer tool in chrome or IE. In IE you can use F12 and under developer tool use Network and click on Start capture and call your ajax function. Check the URL is correct or not or the expected one or not.

Answer 2

function readUsers() {
$.ajax({
        url: readUrl,
        dataType: 'json',
        type: 'POST', // is missing in your ajax call also it might type:get if form  submission is get