首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何使用jquery将表单从CWEB(内容编辑器web部件)提交到sharepoint列表

使用jQuery将表单从CWEB提交到SharePoint列表可以通过以下步骤实现:

  1. 引入jQuery库:在HTML页面中引入jQuery库,可以通过以下CDN链接引入:
代码语言:txt
复制
<script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>
  1. 创建HTML表单:在页面中创建一个包含需要提交的表单字段的HTML表单。例如:
代码语言:txt
复制
<form id="myForm">
  <label for="name">姓名:</label>
  <input type="text" id="name" name="name"><br><br>
  
  <label for="email">邮箱:</label>
  <input type="email" id="email" name="email"><br><br>
  
  <label for="message">留言:</label>
  <textarea id="message" name="message"></textarea><br><br>
  
  <input type="submit" value="提交">
</form>
  1. 编写jQuery代码:使用jQuery选择器选取表单元素,并使用$.ajax()方法将表单数据提交到SharePoint列表。以下是一个示例代码:
代码语言:txt
复制
$(document).ready(function() {
  $('#myForm').submit(function(e) {
    e.preventDefault(); // 阻止表单默认提交行为
    
    var formData = $(this).serialize(); // 序列化表单数据
    
    $.ajax({
      url: 'https://your-sharepoint-site/_api/web/lists/getbytitle(\'YourListTitle\')/items',
      type: 'POST',
      headers: {
        'Accept': 'application/json;odata=verbose',
        'Content-Type': 'application/json;odata=verbose',
        'X-RequestDigest': $('#__REQUESTDIGEST').val()
      },
      data: JSON.stringify({
        '__metadata': { 'type': 'SP.Data.YourListNameListItem' },
        'Title': $('#name').val(),
        'Email': $('#email').val(),
        'Message': $('#message').val()
      }),
      success: function(data) {
        alert('表单提交成功!');
        // 可以在成功提交后执行其他操作,如重置表单等
      },
      error: function(error) {
        alert('表单提交失败:' + error);
      }
    });
  });
});

在上述代码中,需要将https://your-sharepoint-site替换为你的SharePoint网站的URL,YourListTitle替换为你要提交数据的列表的标题,YourListName替换为列表的名称。

  1. SharePoint列表配置:确保在SharePoint列表中创建了与表单字段对应的列,并将列名与代码中的字段名保持一致。

这样,当用户填写表单并点击提交按钮时,表单数据将通过jQuery的AJAX请求发送到SharePoint列表中。成功提交后,会弹出一个提示框显示提交成功。

注意:在实际应用中,可能还需要进行一些额外的验证和安全措施,例如对表单字段进行验证、防止跨站点请求伪造(CSRF)等。以上代码仅提供了一个基本的示例,具体实现可能需要根据实际需求进行调整。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

  • [ASP.NET MVC] 利用动态注入HTML的方式来设计复杂页面

    随着最终用户对用户体验需求的不断提高,实际上我们很多情况下已经在按照桌面应用的标准来设计Web应用,甚至很多Web页面本身就体现为一个单一的页面。对于这种复杂的页面,我们在设计的时候不可以真的将所有涉及的元素通通至于某个单独的View中,将复杂页面相对独立的内容“分而治之”才是设计之道。我们可以借鉴Smart Clent应用的设计方式:将一个Windows Form作为应用的容器(Smart Client Shell),在操作过程中动态地激活相应的用户控件(Smart Part)并加载到容器中。对于一个复杂页面来说,我们也只需要将其设计成一个容器,至于运行过程中动态显示的内容则可以通过Ajax调用获取相应的HTML来填充。[源代码从这里下载]

    02
    领券