如何使用ajax将默认值加载到表单中

时间:2015-12-11 17:27:20

标签: javascript jquery



<form id="PersonForm">

Name: <input type="text" id="name" name="name"> <br>

Postal Code: <input type="text" id="postal" name="postal"> <br>

Phone Number: <input type="text" id="phone" name="phone"> <br>

Address: <input type="text" id="address" name="address"> <br>

<input type="submit">

</form>

<a href="frontend.html">Refresh</a> 
<a id="InsertDefault" href="">Insert Default Data</a> 
<br>

<ul id="errors"></ul>
<p id="success"></p>

</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript" src="main.js"></script>
<?php

// Return JSON default data if requested
if ($_REQUEST['act'] == 'default')
{
  $defaultData = array('name' => "Jane",
                       'postal' => "L5B4G6",
                       'phone' => "9055751212",
                       'address' => "135 Fennel Street");

  echo json_encode($defaultData);
&#13;
&#13;
&#13;

当我使用ajax单击插入默认数据时,如何使用默认值数组并加载默认值?我为insertdefault创建了一个click fucntion但是卡在那里。

3 个答案:

答案 0 :(得分:0)

脚本在请求时打印表单和数据,您需要使用if或单独的文件在请求时仅打印数据。 对于AJAX部分,如果使用jQuery没有问题:

$.getJSON("your-file.php?act=default", function (data) {
  $.each(data, function (key, val) {
    $("#"+key).val(val);
  });
});

答案 1 :(得分:0)

首先,通常你加载默认值,如果它们与PHP一起存在

<input type = "text" value="<?php if (isset($var)){ echo $var ; } else { echo ''; }">

如果你想用JS(jquery)加载它们

$("input").each(function(i,v){ var name = $(this).attr('name'); for(i=0; i < result.length; i++) { if ( result[i]['name'] == name ){ $(this).val(name); break; } } });

未经测试我的头顶

答案 2 :(得分:0)

以下是使用json中ajax的响应或使用链接设置默认值的两种方法。

$(document).ready(function(){
  $('#InsertDefault').click(function(){
    $('#name').val('Jane');
    $('#postal').val('L5B4G6');
    $('#phone').val('9055751212');
    $('#address').val('135 Fennel Street');
  });
});

或者:

$(document).ready(function(){
  var jsonObjFromAjax = {
      "name":"Jane",
      "postal":"L5B4G6",
      "phone":"9055751212",
      "address":"135 Fennel Street"
  };
  $('#name').val(jsonObjFromAjax.name);
  $('#postal').val(jsonObjFromAjax.postal);
  $('#phone').val(jsonObjFromAjax.phone);
  $('#address').val(jsonObjFromAjax.address);
});

希望有所帮助!