如何在javascript中使用存储在我服务器中的对象?

时间:2016-02-05 15:41:19

标签: javascript php jquery html ajax

我想在javascript中声明存储在file.txt中的两个对象,并在代码中使用它。

例如我在index.php中写了这个:

 var counter = Number(localStorage.getItem('rans')) || 0;
 var counter1 = Number(localStorage.getItem('bans')) || 0;

$('.redanswer').one('click', function(){
     localStorage.setItem('rans', ++counter);
     $( '.rtotal' ).text( counter + " concordano" );
     $( '.btotal' ).text( counter1+ " non concordano");
     $('.rgraphic').css("height", counter * 100 / (counter1+counter));
     $('.bgraphic').css("height", counter1 * 100 / (counter1+counter) );
});

$('.blueanswer').one('click', function(){
      localStorage.setItem('bans', ++counter1);
      $( '.btotal' ).text( counter1 + " concordano" );
      $( '.rtotal' ).text( counter + " non concordano");
      $('.rgraphic').css("height", counter * 100 / (counter1+counter));
      $('.bgraphic').css("height", counter1 * 100 / (counter1+counter) );
});

正如您所看到的,在此示例中,项bansrans存储在localStorage中,我将这些项目用于计数器。 我想编写完全相同的代码,但我的bans中存储了新的ransfile.txt。我认为这必须用AJAX完成,但我不知道。

我认为file.txt必须这样写:

bans: 1; //casual number
rans: 5;  //casual number

我希望你明白,非常感谢你。

3 个答案:

答案 0 :(得分:1)

可以使用ajax完成,但也可以在没有

的情况下完成

的index.php

<?php
    // read your file.txt
    // strip off the comments
    // get the value part of bans: 1 into a variable $bans
    // get the value part of rans: 5 into a variable $rans

// for testing
$bans = 1;
$rans = 5;

echo '<script>';
echo "var master_bans = $bans;";
echo "var master_rans = $rans;";
?>

var counter = Number(localStorage.getItem('rans')) || master_bans ;
var counter1 = Number(localStorage.getItem('bans')) || master_rans;

$('.redanswer').one('click', function(){
     localStorage.setItem('rans', ++counter);
     $( '.rtotal' ).text( counter + " concordano" );
     $( '.btotal' ).text( counter1+ " non concordano");
     $('.rgraphic').css("height", counter * 100 / (counter1+counter));
     $('.bgraphic').css("height", counter1 * 100 / (counter1+counter) );
});

$('.blueanswer').one('click', function(){
      localStorage.setItem('bans', ++counter1);
      $( '.btotal' ).text( counter1 + " concordano" );
      $( '.rtotal' ).text( counter + " non concordano");
      $('.rgraphic').css("height", counter * 100 / (counter1+counter));
      $('.bgraphic').css("height", counter1 * 100 / (counter1+counter) );
});
</script>

答案 1 :(得分:1)

RiggsFolly的解决方案,它在服务器端完成工作,似乎是最好的方法。 (投票)

但是,另一种方法是使用脚本标记简单地加载文件,如下所示。

file.txt的内容是:

var config={"rans":10,"bans":20};

页:

<html>
<head>
    <script type="text/javascript" src="file.txt"></script>
</head>
<body>
<script type="text/javascript">

     var counter =  config.rans;
     var counter1 = config.bans;
     alert( 'counter: ' + counter + ', counter1: ' + counter1 );

     // the rest of your code here

</script>
</body>
</html>  

file.txt中的值可以使用编辑器,PHP函数或类似的javascript进行修改:

  // write file.txt
  var xhr = new XMLHttpRequest();
  xhr.open('PUT','file.txt', true);
  xhr.setRequestHeader('Content-Type','text/javascript; charset=utf-8');
  xhr.send( 'var config={"rans":' + counter + ',"bans":' + counter1 + '};' );

答案 2 :(得分:0)

你是对的,你需要使用AJAX来获取数据。

$.ajax({
  type: 'GET',
  url: 'file.txt',
  dataType: 'json',
  success: function(data) {
    if (data.result === 'error') {
      //show an error message
    return false;
    } else {
     console.log(data);
     bans = data.bans;
     rans = data.rans;
    }
  }
});

这是我使用的典型AJAX代码。如果您可以将文件中的任何数据存储为PHP中的数组,则可能更容易使用。例如,您从AJAX调用的file.php可能如下所示:

<?php
$bans = array(); //your bans data here
$rans = array(); //your rans data here

try {
  echo json_encode(array('result' => 'success', data => array('bans' => $bans, 'rans' => $rans)));
} catch (Exception $e) {
    echo json_encode(array('result' => 'error', 'message' => $e->getMessage()));
    exit();
}

这可能不适合您的设置,但我希望这些信息可以帮助您。