Bagaimana untuk melaksanakan interaksi front-end dan back-end dalam layui

Terdapat kaedah berikut untuk menggunakan layui untuk interaksi hadapan dan belakang: Kaedah $.ajax: Permudahkan permintaan HTTP tak segerak. Objek permintaan tersuai: membenarkan menghantar permintaan tersuai. Kawalan borang: mengendalikan penyerahan borang dan pengesahan data. Kawalan muat naik: melaksanakan muat naik fail dengan mudah.

Gunakan layui untuk mencapai interaksi hadapan dan belakang

layui ialah rangka kerja bahagian hadapan yang popular yang menyediakan alatan untuk memudahkan interaksi dengan bahagian belakang. Terdapat terutamanya cara berikut:

1. Menggunakan $.ajax

layui menyediakan kaedah $.ajax yang mudah untuk menghantar permintaan HTTP tak segerak. Ia merangkumi kaedah $.ajax jQuery dan menyediakan API yang lebih mesra:

<code class="javascript">layui.use(['jquery'], function($){
  $.ajax({
    url: '/api/get_data',
    success: function(data) {
      console.log(data);
    }
  });
});</code>

2 Gunakan permintaan tersuai

layui juga membenarkan permintaan dihantar melalui objek permintaan tersuai:

<code class="javascript">layui.use(['request'], function(request){
  request.post('/api/save_data', {name: 'layui'})
    .then(function(data){
      console.log(data);
    });
});</code>

3 layui menyediakan kawalan Borang, yang boleh mengendalikan penyerahan borang dan pengesahan data dengan mudah:

<code class="html"><form id="myForm">
  <label>姓名：</label>
  <input name="name">
</form>

<script>
layui.use(['form', 'jquery'], function($, form){
  form.on('submit(submitForm)', function(data){
    $.post('/api/save_user', data.field, function(data){
      console.log(data);
    });
  });
});
</script></code>

4 Gunakan kawalan Muat Naik

layui menyediakan kawalan Muat naik, yang boleh memuat naik fail dengan mudah:

<code class="html"><div class="layui-upload">
  <button type="button" class="layui-btn" id="uploadBtn">上传图片</button>
  <input type="file" name="file" accept="image/*" multiple hidden>
</div>

<script>
layui.use(['upload'], function(upload){
  upload.render({
    elem: '#uploadBtn',
    url: '/api/upload_image',
    done: function(res){
      console.log(res);
    }
  });
});
</script></code>

.

Atas ialah kandungan terperinci Bagaimana untuk melaksanakan interaksi front-end dan back-end dalam layui. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!